溢出(滚动) - 100%容器高度

Question

我想要一个浮动的div(称之为'侧边栏')显示100%的容器高度,并在必要时滚动.

如果侧边栏的内容(高度)超过容器的内容(高度),则应滚动.

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

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

我不想使用javascript.

如果表,正文和单元格都被赋予100%高度,则可以使用表格实现此效果,并且在一个单元格中,可以设置高度为100%且溢出:滚动的div.这适用于webkit(Safari和Chrome)以及IE,但在壁虎(Fx)中失败 - '失败'意味着内容比容器更多的div将扩展容器(再次仅在Fx中).如果使用带有display:table/table-row/table-cell的div,则在webkit中使用相同的想法,但在Fx和IE中都失败.如果它有用,我可以提供一个这样的样本.

使用高度为100%的iframe也可以实现这种效果,这似乎适用于所有现代浏览器,但我希望尽可能避免不必要的iframe.

我必须认为,因为可以使用上面的"黑客",所以可能使用无桌面,无框架的CSS,但超出了我的理解水平.

有什么建议？tyia.

Answer 1

这是用于完成此任务的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/