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

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 无法理解 table 属性的 display 值。

所以克服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。