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/

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