Question

我有以下结构： image http://images.devs-on.net/Image/4eludampmz3Ylfm6-Bereich.png

我不知道头部的高度，但我希望第二个容器填满剩下的高度。

我找到了一些解决方案，当我现在的头部大小，但我没有。我希望上部容器适合其内容，而第二个容器填充窗口的其余部分。

如何解决这个问题？

Answer 1

你可以通过

来做到这一点

position:absolute;
height:100% !important;

Answer 2

您可以使用JavaScript / jQuery

var topDivHeight = $("#topdiv").height(),
totalHeight = $(document).height();
$('#bottomDiv').height(totalHeight  - topDivHeight );

Answer 3

使用纯CSS实现这一点并不是一个很好的跨浏览器方式。最好的办法是使用jQuery / javascript来调整div的高度以填充屏幕。假设您的顶部div高度为200px：

$("#bottom_div").css({
    minHeight: (($(window).height()) - 200) + 'px'
})

您也需要在调整屏幕大小时调用此方法。

Answer 4

改编自：div with dynamic min-height based on browser window height并且不依赖于javascript。

HTML：

<div id="header">
  Place your header information here.
</div>
<div id="content">
  Place your content here.
</div>

CSS：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important /*min-height hack*/
  height: 100%;           /*min-height hack*/
  background-color: red;
}

JSFiddle测试：http://jsfiddle.net/7SP9U/

Answer 5

为此，您可以使用 display：table 属性，但它可以工作到IE8＆amp;以上。写得像这样：

<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
</div>

<强> CSS

.container{
    display:table;
    height:800px;
    width:100%;
}
.container > div{
    display:table-row;
}
.header{background:red; height:10%;}

.content{background:blue}

选中此http://jsfiddle.net/Rvbk4/2/

Answer 6

这是一个仅限CSS的解决方案，由于使用了display: table，因此只能在IE8中使用。

容器必须占据全高，绝对定位并取display: table。它的子节点需要display: table-row（如果你想要在这个级别以下任何不错的样式，你应该用display: table-cell将内容包装在更多包装器中，但我省略了这个以使示例清晰。）

默认情况下，行将占用父级的相等分数高度，但您可以通过设置height: 0（或任何其他高度）使它们缩小以适合其内容。

希望这会有所帮助：

http://jsfiddle.net/barney/nXWbL/

让底部div填充页面的其余部分

6 个答案: