Question

有没有办法让两个<div>容器，一个具有静态高度，另一个具有动态，基本上只占用视口的剩余部分？

在动态容器内部，如果内部存在溢出，容器本身将相应地显示滚动条。这样，视口应该需要一个y轴滚动条。

有什么想法吗？它需要大量的脚本吗？还是纯粹用css完成？

Answer 1

<强> 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底部边框添加到一起。

对outerHeight()使用.header表示无需添加任何内容，因为包含了顶部和底部填充和边框。如果您使用outerHeight(true)，则还会包括上边距和下边距。

Answer 2

http://jsfiddle.net/kKgQb/29/

.content{
    position:absolute;
    top: 212px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: auto;

    outline: 1px solid red;   
    overflow-y: scroll;
    overflow-x: hidden;
}

.header{
    height:200px;
    outline: 1px solid green;
}

Answer 3

如果您的标头是静态的，您可以通过javascript

设置容器的高度

var windowHeight = $(window).height();

$('.content').height(windowHeight - $('.header').height())

这不考虑填充或边距，但它应该给你一个想法。您可能还希望在浏览器调整大小时随时运行它。

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

function doResize(){
    var windowHeight = $(window).height();

    $('.content').height(windowHeight - $('.header').height())
}

静态容器高度与动态尺寸的容器相结合，可能吗？

3 个答案: