div上的滚动条溢出：自动和百分比高度答案

【问题标题】：scroll bar on div with overflow:auto and percentage heightdiv上的滚动条溢出：自动和百分比高度
【发布时间】：2013-06-08 06:01:05
【问题描述】：

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

页面的结构是

<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>

overflow:auto 在层次结构中的某处没有已知的px 高度是否可以工作？

【问题讨论】：

我很惊讶！ id=header 有效！（不带引号）。 DOM 标签可以用作 ID 似乎很疯狂……

标签： html scroll height overflow percentage

【解决方案1】：

在回答您的问题时，是的，overflow:auto 可以使用，但您还需要在 HTML 标记上使用 height: 100%：

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

虽然你的标记的结构方式会产生两个 div，它们都与视口高度相同，一个在另一个之上。这是你的本意吗？

如果是这样，这里有一个 jsFiddle 来说明您的示例。我已经调整了标记并添加了其他内容，以便内容 div 可以根据需要溢出。

http://jsfiddle.net/chrissp26/WsNjm/

【讨论】：