div上的滚动条带溢出:自动和百分比高度 [英] scroll bar on div with overflow:auto and percentage height

查看:794
本文介绍了div上的滚动条带溢出:自动和百分比高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

是否可以创建一个适应浏览器大小的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>内容被动态替换< / div>
< / body>

溢出:在层次结构中没有已知px高度的自动工作?

解决方案

在回答您的问题时,是 overflow:auto 可以工作,但您需要 height:100%以及HTML标签:

  html,body {
height:100%;
保证金:0;
}
#header {
height:100%;
}
#content {
height:100%;
溢出:auto;
}

标记的结构虽然会产生两个div,视口一个在另一个之上。这就是你的意图?



如果是这样的话,这是一个说明你的例子的jsFiddle。我已经调整了标记并添加了额外的内容,以便内容div能够按照您的要求进行溢出。

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


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?

解决方案

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/

这篇关于div上的滚动条带溢出:自动和百分比高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆