使用overflow:auto和百分比高度的div如何添加滚动条？

Question

使用overflow:auto和百分比高度的div如何添加滚动条？

10

是否可以创建一个适应浏览器大小并且可滚动的div？我想在div上使用overflow:auto和90%的百分比高度。

页面的结构如下：

<body style="height:100%">
<div id=header style="height:100%">headerinfo</div>
<div id=content style="height:100%;overflow:auto">content which is replaced dynamically</div>
</body>

在层级结构中没有已知的 px 高度时，overflow:auto 是否有效？

- techdog

我很惊讶！id=header起作用了！（不带引号）。看起来很疯狂，一个DOM标签可以被用作ID... - Brice Coustillas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Spittles · Accepted Answer

回答你的问题，是的 overflow:auto 可以起作用，但是你还需要在 HTML 标签上添加 height: 100%：

html,body {    
    height:100%;
    margin: 0;
}
#header {
    height: 100%;
}
#content {
    height: 100%;
    overflow: auto;
}

您的标记结构会生成两个与视口高度相同的

，一个在另一个上方。这是您想要的结果吗？

如果是这样，这里有一个jsFiddle示例，我已经调整了标记并添加了额外内容，以便

按您的要求溢出。 http://jsfiddle.net/chrissp26/WsNjm/