CSS 垂直定位 : relative top + absolute 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>

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

任何关于如何实现该目标的帮助，或者如果有任何更简单的方法来实现它，非常感谢。

Answer 1

这是回答here .

简而言之——尽可能使用 flexbox。关键元素:

• 您需要在 2 个 div 周围使用 flexbox 包装器，使用 flex-direction: column
• 将 flex-grow: 1 添加到 #fill-the-fold。

我在上面的链接中看不到的另一种可能性是加大第二个 div 并用 wrapper 切掉底部 - fiddle .这显然只有在您不介意丢失第二个 div 的底部时才有用。