Jquery - 带子项（100% 高度和宽度）和动态内容的可调整大小的 DIV

Question

我有一个具有动态内容和调整大小功能的 DIV。
这是一个例子-> http://jsfiddle.net/UsRuh/4/

问题在于动态内容。
示例-> http://jsfiddle.net/UsRuh/5/

它只有在我设置时才有效#main DIV 上方的填充。
示例-> http://jsfiddle.net/UsRuh/6/

是否可以（仅使用 CSS，不使用 JS！）解决这个问题？

CSS

#header {
    background-color:#faf; }

#main {
    position: absolute; top: 18px; left: 18px; width: 384px; height: 157px;
    padding:0px 0px 80px 0px;
    position: absolute;
    overflow:hidden;}

#scrollDiv {
    background-color:#ccaacc;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 25px;
    width: 100%; }

HTML

<div id="main">

    <div id="header">Head</div>

    <div style="background-color:#555;"> some dynamic content text text text text <br /> some dynamic content</div>

    <div id="scrollDiv"> some dynamic content width "invisible" scroll<br />text text text text text text text text text text text text text text text text text text text text text text text text text text text text .... ext text </div>

    <div style="background-color:#555;"> some dynamic content text text text text <br /> some dynamic content</div>

</div>

编辑： 如果没有其他解决方案，请告诉我。

Answer 1

没有可用的纯 CSS 跨浏览器解决方案。

现在实现它的唯一方法 - 使用额外的包装器和 display:table + display:table-raw，所以它看起来像这样： http://jsfiddle.net/kizu/UsRuh/28/

问题仍然是：IE。 IE6 和 IE7 无法理解 display 属性的 table 值。

所以克服IE只有两种可能的方法：

• 使用表达式（但和JS的使用是一样的）
• 使用无语义的表格而不是div，这样它在任何地方都可以工作。

这确实是一个大问题，并且表格布局在很长一段时间内是唯一可能的解决方案。然而，在未来（现在在webkit和firefox中）我们可以尝试使用灵活的盒子模型。

借助灵活的盒子模型，只需使用 CSS 即可轻松实现您想要的目标： http://jsfiddle.net/ kizu/UsRuh/29/

这就是灵活盒模型出现的原因。太遗憾了，它的可用性仍然不完美。

Answer 2

如果您只有一个 div 在可滚动 div 下方包含动态内容，则可以使用绝对定位将其捕捉到底部。只需确保父级 div (#main) 具有相对或绝对定位即可。

• 小动态内容：http://jsfiddle.net/yYwv5/
• 大动态内容：http://jsfiddle.net/sH8eJ/

Answer 3

我对 CSS 做了轻微的更改，可以在以下位置看到： http://jsfiddle.net/KuzTB/

我已经包含了 CSS3 的伪类：nth-​​child(n) 并将其应用于最后一个内部 div。