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

如果您只有一個div ，其動態內容低於可滾動div，則可以使用絕對定位捕捉到底部。 只需確保父div （ #main ）具有相對或絕對定位。

• 小動態內容： http ： //jsfiddle.net/yYwv5/
• 大動態內容： http ： //jsfiddle.net/sH8eJ/

Answer 2

目前還沒有可用於CSS的crossbrowser解決方案。

現在實現它的唯一方法 - 使用額外的包裝器和display:table + display:table-raw ，所以它看起來像這樣： http ： //jsfiddle.net/kizu/UsRuh/28/

問題仍然是：IE。 IE6和IE7不會理解display屬性的table值。

因此，只有兩種可能的方法來克服IE：

• 使用表達式（但它與JS的使用相同）
• 使用unsemantic表而不是div，所以它可以在任何地方工作。

這確實是一個大問題， 表格布局是很長一段時間內唯一可行的解​​決方案。 但是，在將來（現在在webkit和firefox中），我們可以嘗試使用靈活的盒子模型。

使用靈活的盒子模型，只需使用CSS即可輕松實現您想要的效果： http ： //jsfiddle.net/kizu/UsRuh/29/

這就是靈活的盒子模型出現的原因。 太可悲了，它的可用性仍然不完美。

Answer 3

我在CSS上做了一些小改動，可以在http://jsfiddle.net/KuzTB/看到

我已經包含了CSS3的偽類：nth-​​child（n）並將其應用於最后一個內部div。