Question

我正在尝试使用浮动div（称之为“侧边栏”）显示容器高度的100％，并在必要时滚动。

如果侧边栏的内容（高度）超过容器的内容（高度），则应滚动。

内容是动态的，固定的高度是不可能的。

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

我不想使用javascript。

这个效果可以用表来实现，如果表，正文和单元格都给出了100％的高度，并且在一个单元格中有一个高度为div的div：100％和overflow：scroll。这适用于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/

Answer 2

在大多数现代浏览器中，您也可以这样做

.your-scrollable-div {
  height: calc(100%);
  overflow-y: scroll;
}

我已经看到可以在Chrome和Firefox上使用此功能，但是Safari在这里不受欢迎。

溢出（滚动） - 100％容器高度

2 个答案: