jquery - 获取 div 容器高度以动态调整大小以适应页脚

Question

我正在创建一个具有不同显示模式(admin、display、user)的网站。

我希望容器的高度根据显示模式动态调整大小，以便占用页眉/页脚之间的空间。

在某些情况下没有页脚(显示)，因此容器应占据剩余空间。

除此之外，我希望容器在设置的边界内自动溢出。

我怎样才能实现这一目标？

到目前为止，这是我的代码:http://jsfiddle.net/UgQLS/2/

目前容器高度设置为 100%，当文本溢出时，它会被页脚覆盖。

不同的显示模式:

$(".admin_btn").click(function() {
    $('.user').hide();
    $('.admin').show();
});

$(".user_btn").click(function() {
    $('.admin').hide();
    $('.user').show();
});

$(".display_btn").click(function() {
    $('.admin').hide();
    $('.user').hide();
    $('.display').show();
}); 

$('.admin').on('click', '#sendlogout', function (e) {
    $('#login_confirm').hide()
    $('#hide_admin').show()
});

Answer 1

我建议创建一个固定的页脚区域并将各种页脚元素放入其中。然后，您可以使用 css 类来改变内容的底部填充以适应动态页脚内容，或者根据当前页脚高度重新计算内容容器填充。

注意:填充容器允许您将固定页脚隐藏的内容滚动到 View 中

在此fiddle你可以看到一个重新计算的方法

$(".admin_btn").click(function() {
    $('.user').hide();
    $('.admin').show();
    reflow();
});

function reflow() {
    $('.container').css('padding-bottom', $('#footer').height() );
}

但是您可以在单击按钮时轻松地向您的内容添加一个类，并以这种方式设置 padding-bottom

$(".admin_btn").click(function() {
    $('.user').hide();
    $('.admin').show();
    $('.container').toggleClass('admin');
});

CSS

.container.admin {
     padding-bottom: 156px;
}

如果您使用 css 方法，您可以通过基于容器类设置页脚元素上的显示来消除 hide() 和 show() 调用，像这样:

$(".admin_btn").click(function() {
    $('.container').toggleClass('showadmin');
});

CSS

.user, .admin {
    display: none;
}

.showadmin .admin {
    display: inherit;
}

.container.showadmin {
    padding-bottom: 156px;
}