带溢出的div上的滚动条:自动和百分比高度

时间:2013-06-12 07:43:42

标签: html scroll height overflow percentage

是否可以创建一个可以调整浏览器大小并且也可以滚动的div? 我想在overflow:auto的div和百分比高度上使用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>

overflow:auto在层次结构中某处没有已知px高度的情况下工作吗?

1 个答案:

答案 0 :(得分:10)

在回答您的问题时,是overflow:auto可行,但您还需要height: 100% HTML标记:

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

构建标记的方式虽然会生成两个div,两个div的高度与视口的高度相同。那是你的意图吗?

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

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