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

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，正在寻找类似的答案...无论如何它可以帮助某人。

Answer 2

您的包装不会滚动，因为它没有高度（或 100%）。 然后，应用默认浏览器滚动，但您不能在包装级别滚动。

只需为包装器指定高度即可实现滚动 - 例如：

#wrapper { 
  position:fixed;
  right:550px;
  left:0;
  background:rgb(200,200,200);
  height: 500px;
  overflow: auto;
}

希望这会有所帮助

Answer 3

您可以通过将蓝色 div 设置为 position: absolute 然后设置顶部和底部值来做到这一点。即

html, body{
    width: 100%; height: 100%; margin: 0; padding: 0;
}
#top-inside-container {
    position: absolute; top: 0; width: 100%; height: 100px; background:rgb(75,0,0);
}
#bottom-inside-container {
    position: absolute; width: 100%; top: 100px; bottom: 0; background:rgb(0,75,200); overflow-y: scroll;
}

它在这里工作： http://codepen.io/anon/pen/qnwFf

Answer 4

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

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

因此，如果您不介意将两行 jquery 添加到您的 document.ready() 中，请参阅 my pen 关于以这种方式解决它，您可以忽略您页面的 window.resize() 代码，就像我把它放在笔中一样这样您就可以垂直拖动 iframe 并查看蓝色 div 如何保持预期的高度。

另外，如果您查看我笔的 css cmets，我将您的 left:25px 更改为 4%，因为相对父母需要它来正确处理（除了通常使用 % 比使用 px 更好）。

为了方便，我把pen jquery代码贴在这里：

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