1

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

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

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

最重要的是，我希望容器在设置的边界内自动溢出。

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

到目前为止，这是我的代码：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()
});
4

1 回答 1

1

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

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

在这个小提琴中，您可以看到重新计算的方法

$(".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()and调用，如下所示：show()

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

css

.user, .admin {
    display: none;
}

.showadmin .admin {
    display: inherit;
}

.container.showadmin {
    padding-bottom: 156px;
}
于 2013-07-28T17:16:41.150 回答