Question

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

问题是动态内容。
示例 - ＆gt; http://jsfiddle.net/UsRuh/5/

仅当我将#main DIV的填充设置得更高时才会起作用。
示例 - ＆gt; 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不会理解table属性的display值。

因此，只有两种可能的方法来克服IE：

使用表达式（但它与JS的使用相同）
使用非语义表而不是div，因此它可以在任何地方使用。

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

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

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

Answer 3

我对CSS做了一些小改动，可以在http://jsfiddle.net/KuzTB/

看到

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

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

3 个答案: