jquery - 静态容器高度与动态大小的容器相结合，可能吗？

Question

有没有办法让两个<div>容器，一个具有静态高度，第二个在动态下方，基本上只占用视口(viewport)的剩余部分？

在动态容器内部，如果有溢出，容器本身会相应地显示滚动条。这样视口(viewport)就应该永远需要一个 y 轴滚动条。

Example

有什么想法吗？它需要大量脚本编写还是可以纯粹使用 css 完成？

Answer 1

我会这样做:http://jsfiddle.net/tw16/X5rWb/

CSS:

.content{
    border: 1px solid red;
    overflow-y: auto; /* now scrollbars will only appear when needed */
    overflow-x: hidden;
}

jQuery:

$(function () {
    adjustHeight();
});

$(window).resize(function () {
   adjustHeight();
});

function adjustHeight() {
    var windowHeight = $(window).height() - 2;
    var headerHeight = $('.header').outerHeight();

    $('.content').height(windowHeight - headerHeight);
}

windowHeight 中的 2 来自将 .content div 的 1px 顶部和 1px 底部边框相加。

对 .header 使用 outerHeight() 意味着不需要添加任何内容，因为顶部和底部的填充和边框都包含在内。如果您要使用 outerHeight(true)，这还将包括顶部和底部边距。