css - CSS HTML 垂直自动调整大小并按需滚动

Question

所以这就是我想要做的：让有一个固定大小的列。列的高度应占用父级的大小。

在列内，我有两个垂直堆叠的 div。它们的宽度都占据了列宽。第一个 div 的高度是固定大小的。然而，第二个是可变的，占用父级的任何剩余部分。而且它的内容是可变的。如果它的内容太大，应该会出现一个垂直滚动条。

如何使用 HTML 和 CSS 做到这一点？

这是一个快速的 JSFiddle POC。

我的问题是，如果我将第二个 div 高度设置为 auto，它将延伸到其父级之外。如果我将其设置为 100%，它将再次大于其父级。重要的是滚动条只出现在第二个 div 上，而不是主 div 本身。

谢谢，

Answer 1

这是我要做的：

http://jsfiddle.net/Tfzhm/1/

添加position:relative到container div, 并使可滚动div position:absolute. 顶部应设置为与第一个堆叠 div 的高度相同的像素数量。最后，设置bottom:0px它到达包含 div 的底线。