html - 如何在垂直滚动的 div 中将 div 缩放到 100% 高度？

Question

即使向下滚动到最底部(不仅仅是 100 像素)，我也希望 div2 的高度为 div1 的 100%。 仅使用 CSS 是否可行？

http://jsfiddle.net/jPMjF/2/

<div id="div1">
     <div id="div2">
     </div>
     <p>Bunch of text here</p>
</div>

#div1 {
   background-color: #fff;
   border:1px solid #ff0000;
   height: 100px;
   overflow: auto;
   overflow-x: hidden;
   width: 200px;
}

#div1 p {
    display: inline-block;
    width: 50px;
    height: 200px;
}

#div2 {
    display: inline-block;
    background-color: #ccc;
    vertical-align: top;
    width: 100px;
    height: 100%
}

Answer 1

如果 div2 小于 300px，为什么 div1 的可滚动高度会超过 300px？根据您发布的内容，我认为您只需要:

#div1 {
   height: 300px;
   overflow-x: hidden;
   overflow-y: auto;
}

#div2 {
    background-color: #ccc;
    min-height: 100%;
}

这意味着当高度小于 300 像素时 div2 会填满整个容器，但如果容器因滚动条而溢出，它仍然可以展开。

编辑

好吧，这样看来不合适。在这一点上，我会倾向于一些情境选择:

1. 如果您知道只有 div2 或 p(假设我们将其放在 div3 中)的高度会超过 300 像素，那么您可以设置 div1 的背景以匹配相反的 div。这意味着较小的 div 下方的任何空白区域都将具有相同的背景，对用户来说都是一样的。
2. 如果 div2 和 div3 都具有固定宽度，那么您可以清除两个背景并在容器 div 上放置一个背景图像。 (这显然是一个垂直重复的 1px strip ，中间某处有颜色分割。)
3. 如果您不适合较旧的浏览器，您可以使用 CSS3 灵活盒模型，据我了解，它旨在扩展以填充容器内的所有空间。
4. 您可以使用 display: table 属性作为表格样式的一种有点“hackish”的方法。请注意，CSS 表格似乎不允许固定高度，它们会溢出以显示没有滚动条的所有内容，因此您需要将其放置在设置为内联 block 、固定宽度和适当溢出值的外部容器中。<