CSS垂直定位：相对定位top + 绝对定位bottom

Question

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

我考虑的做法是用relative定位顶部和absolute定位底部，但我不确定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>

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

如果有任何帮助来实现这一目标，或者是否有更简单的方法，请提供支持。

- vastur

Answer 1

这里有答案。

简而言之，如果可以的话，请使用flexbox。关键点：

• 你需要在两个div周围放置一个flexbox包裹器，其中flex-direction: column
• 将flex-grow: 1添加到#fill-the-fold中。

上面链接中没有提到的另一个可能性是过度调整第二个div的大小并用包装器截去底部 - fiddle。当您不介意失去第二个div的底部时，这显然是很好的。

- Jon Fagence

Answer 2

您可以通过应用边距技巧来实现您的目的。 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%;
}

在头部后面添加您的红色边框部分，并通过负边距将其移动。然后在内部编写您的实际内容。

- Ire

---

我明白了。这是个不错的技巧，但唯一的问题是它仍然需要你知道前面元素的高度 (100px)，而在我的情况下，我并不知道它们的高度。它们可能是任意高度。 - vastur

同样的效果也可以通过将红色元素定位为绝对位置，并设置“top: 100px”来实现。但是正如之前提到的，我们假设不知道这个高度为100像素。 - vastur

据我所知，目前还没有一种方法可以填充剩余的任意高度。希望有其他人能够向我们展示如何完成这个任务。 :) - Ire

position:absolute 的问题在于，如果此框架中有更多的项目，则绝对定位会引起更多麻烦。 - Ire

如果你想要实现一个满足任意高度的CSS，也许可以尝试使用SCSS。它允许你在CSS中声明变量。 :) - Ire