css – 溢出(滚动) – 100％容器高度

我想要一个浮动的div(调用它’sidebar’)显示容器高度的100％,如有必要,滚动.

如果侧边栏具有比容器更多的内容(高度),则应该滚动.

内容是动态的,固定的高度是不可能的.

如果可能,我想避免表,但是如果这是唯一的解决方案,会使用它们.

我不想使用javascript.

如果表,主体和单元格都被赋予100％的高度,并且在一个单元格中具有高度为100％的div,并且设置了overflow：scroll,则可以通过表格实现此效果.这可以在webkit(Safari和Chrome)以及IE中使用,但在gecko(Fx)中失败 – “失败”意味着比容器内容大的div将扩展容器(仅在Fx中).如果使用带有display：table / table-row / table-cell的div,则同样的想法可用于webkit,但在Fx和IE中都失败.我可以提供一个这样的例子,如果它是有帮助的.

这种效果也可以使用高度为100％的iframe来实现,这似乎在所有现代浏览器中都可以使用,但是如果可能的话我想避免不必要的iframe.

我必须认为,由于可能使用上述“黑客”,可能使用无桌面,无框架的CSS,但超出了我的理解水平.

有什么建议么？ tyia.

解决方法

这里是CSS样式来完成这个：

#container { width:500px; border:3px solid red; margin:0 auto; position:relative; }

#sidebar { position:absolute; left:0; top:0; width:150px; height:100%; background-color:yellow; overflow-y:scroll; }

#main { margin-left:150px; }

p,ul { padding:10px; }

<div id="container">
    <div id="sidebar">
        <ul>
            <li> line 1 </li>
            <li> line 2 </li>
            <li> line 3 </li>
            <li> line 4 </li>
            <li> line 5 </li>
            <li> line 6 </li>
            <li> line 7 </li>
            <li> line 8 </li>
            <li> line 9 </li>
            <li> line 10 </li>
            <li> line 11 </li>
            <li> line 12 </li>
            <li> line 13 </li>
            <li> line 14 </li>
            <li> line 15 </li>
            <li> line 16 </li>
            <li> line 17 </li>
            <li> line 18 </li>
            <li> line 19 </li>
            <li> line 20 </li>
        </ul>
    </div>
    <div id="main">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkNown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>
</div>

现场演示：http://jsfiddle.net/TUwej/2/