Question

我正在创建一个具有不同显示模式的网站（管理员，显示，用户）。

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

在某些情况下，没有页脚（显示），因此容器应该占用剩余的空间。

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

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

到目前为止，我的代码是：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类来改变内容的底部填充以容纳动态页脚内容，或者根据当前页脚高度重新计算内容容器填充。

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

在此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;
}

使div容器高度动态调整大小以容纳页脚

1 个答案: