Question

我需要定义一个div，前面有任意数量的具有任意高度的元素，但它应该填充剩余的空间直到折叠的底部。

我想这样做的方法是将顶部与相对位置和底部放置为绝对位置，但我不确定这是否可以在CSS中使用。

#header {
    border: 1px solid green;
    width: 100%;
    height: 100px;
}

#fill-the-fold {
    border: 1px solid red;
    position: absolute;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<div id="header"></div>
<div id="fill-the-fold"></div>

基本上，我希望红色容器从绿色下方开始，并将空间填充到页面底部。

有关如何实现这一目标的任何帮助，或者如果有更简单的方法可以解决它，非常感谢。

Answer 1

您可以通过应用保证金技巧达到目的。 JSFiddle

HTML：

<div id="header"></div>
<div id="fill-the-fold">
    <div id="content">

    </div>
</div>

CSS：

html,body{ margin:0px; height:100%;} 
div{
    box-sizing: border-box;
}
#header {
    border: 1px solid green;
    width: 100%;
    height: 100px;
}

#fill-the-fold {
    margin-top: -100px; /* shifting it covers head */
    padding-top: 100px; /* shifting the content under the head */
    height: 100%;
}

#content{
    border: 1px solid red;
    height: 100%;
}

在头部后面添加红色边框部分，并将其移动到负边距。然后在内部写下你的真实内容。

Answer 2

回答here。

简而言之 - 如果可以，请使用flexbox。关键项目：

你需要一个围绕你的2个div的flexbox包装器，flex-direction: column
将flex-grow: 1添加到#fill-the-fold。

我在上面的链接中看不到的另一种可能性是超大第二个div并用包装器切断底部 - fiddle。当你不介意失去第二个div的底部时，这显然是好的。

CSS垂直定位：相对顶部+绝对底部

2 个答案: