css - 整页设计 : How to force a Div to stop expanding at the bottom of the page

Question

如果标题有点困惑，我很抱歉，但我不确定如何用一句话描述我的问题。所以基本上我几天以来一直在为整页/屏幕设计而苦苦挣扎。

在我的设计中，我有多个包含一些文本的 Div，其中一个比正常屏幕分辨率的高度大很多。此外，我不希望网站在查看者浏览器的一侧有滚动条，我宁愿在 Div 中有一个太大的滚动条(例如在此 div 中使用 overflow: auto;) .但是我似乎无法同时获得 div 和滚动条的正确定位。

Here is a CodePen of my situation ，我希望红色和蓝色的 Div 像那样定位，但我也希望蓝色的 div 在到达页面底部时停止扩展，并在到达页面底部时滚动。

我发现获得滚动条的唯一方法是使用max-height 或绝对定位。然而，这些解决方案都不可行，因为蓝色 div 的最大高度对于每个屏幕分辨率都是不同的，并且红色 div 的高度不是固定的。此外，如果我尝试使用绝对定位，我最终会看到蓝色 div 位于红色 div 之上，因为蓝色 div 的绝对定位使其离开“流动”(而且我不能使用 margin-top:“红色div的高度”；解决这个问题，因为红色div的高度是不固定的)。

希望我的解释很清楚，并且有人能够帮助我。顺便说一下，我宁愿不使用 JS，但如果有必要，我会使用它。此外，我欢迎使用不支持旧版 IE 的解决方案，因为我的观众都没有使用它们。

谢谢，托马斯 A

编辑:为了更清楚，我希望它看起来像 that但是蓝色 div (#bottom-inside-container) 的高度是动态的而不是固定的(无论页面大小如何，从 div 的开始到页面底部)

Answer 1

3 年后，更好的浏览器支持 flexbox 属性很容易。您可以将以下内容添加到您的 CSS 中:

#wrapper {
    display:flex; 
    flex-direction:column;
}
#top-inside-container {
    flex-grow:2;
}
#bottom-inside-container {
    flex-grow:1;
    overflow-x: hidden;
    overflow-y: auto;
}

在顶部内部容器中设置 flex-grow:2，这是一个很小的容器，可以让它增长直到显示所有内容。在容器底部设置溢出将隐藏(对于水平滚动)和设置(对于垂直滚动)滚动条，具体取决于它必须显示多少内容。

以下是基于您的 codepen 的代码，仅作了极少的修改:

http://codepen.io/anon/pen/BLKENA

PD:我来自 Google，正在搜索类似的答案...它无论如何都可以帮助到某些人。