整页设计:如何强制Div停止在页面底部展开

Question

如果标题有点令人困惑,我很抱歉,但我不知道如何用一句话来描述我的问题.所以基本上我在整页/屏幕设计上花了几天时间一直在努力.

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

这是我的情况的CodePen,我希望红色和蓝色Div这样定位但我还希望蓝色div在到达页面底部时停止扩展并且如果确实发生则滚动.

我发现获得滚动的唯一方法是使用max-height或绝对定位.然而,这些解决方案都不可行,因为蓝色div的最大高度对于每个屏幕分辨率是不同的,并且红色div的高度不固定.此外,如果我尝试使用绝对定位,我最终将蓝色div放在红色div上方,因为蓝色div的绝对定位使其保持"流动"(并且我不能使用margin-top:" red div" ;解决这个问题,因为红色div的高度不固定).

希望我的解释清楚,有人可以帮助我.顺便说一下,我宁愿不使用JS,但如果有必要,我会使用它.此外,我欢迎一个不在旧版本的IE上的解决​​方案,因为我的观众都没有使用它们.

谢谢你,托马斯A.

编辑:只是为了更清楚我希望它看起来像那样,但蓝色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:我来自谷歌寻找类似的答案......无论如何它可以帮助某人.

Answer 2

您说您的第二个失败选项（在蓝色 div 上使用绝对定位）无法完成，因为它离开了正常流程。好吧，我通过将红色和蓝色 div 包含在相对父级中，使蓝色 div 成为绝对的，同时不离开正常流程，请参阅http://codepen.io/anon/pen/KEdwG

但是，它仍然失败..原因是，你将现在的绝对蓝色 div 设置为多少高度？你无法给出答案，我也无法给出答案，但是“overflow：scroll”需要知道在什么高度开始滚动。这就是为什么不能仅使用 CSS 来完成此操作的原因。

因此，如果您不介意向您的 中添加两行 jquery document.ready()，请参阅我的笔如何解决此问题，您可以忽略window.resize()页面的代码，因为我将其放入笔中，以便您可以垂直拖动 iframe 并查看如何蓝色 div 保持预期高度。

另外，如果你看看我笔的CSS注释，我会改变你的left:25px，因为4%它是亲戚父母需要的，以使其正确（此外，一般情况下使用 % 比 px 更好）。

为了方便起见，我在这里粘贴了 pen jquery 代码：

$(document).ready(function() {
  max = $(document).height() - $('#bottom-inside-container').offset().top;
  $('#bottom-inside-container').css('max-height',max);
});