scroll bar on div with overflow:auto and percentag

2019-02-17 02:36发布

站内文章 / 后端开发

29 0

三岁会撩人

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Is it possible to create a div that adjusts to the size of the browser and is also scrollable? I want to use overflow:auto on the div and percentage height of 90%.

The structure of the page is

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

Will overflow:auto work without a known px height somewhere in the hierarchy?

回答1:

In answer to your question, yes overflow:auto will work, but you will need height: 100% on the HTML tag as well:

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

The way your markup is structured though will produce two divs both the same height as the viewport one on top of the other. Is that what you intended?

If so here is a jsFiddle that illustrates your example. I've tweaked the markup and added additional content so that the content div overflows as you require.

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