如何使div显示滚动条(没有固定高度)?
我有一个页面,上面有两个div
,它应该填满整个屏幕。如何使div显示滚动条(没有固定高度)?
它们都有宽度= 100%
上部一个的高度应通过其内容(最小可能高度适合所有内容),并从不显示任何滚动来限定。
下面的一个应该填满屏幕的其余部分。但是,如果其内容不适合div,则应显示垂直滚动条。
像这样:
<div id="header">This block should not display the scrollbars</div>
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div>
如何用CSS
办呢?
更新:
我在寻找,不会要求我设置固定的高度上DIV的解决方案。
这可能吗?
我能看到你实现这一目标是通过JavaScript的唯一方法。我知道你没有标记/要求JS,但我想不出一个简单,优雅的CSS解决方案。
使用JS,你可以捕获header div的onpropertychange
事件,检查属性是否改变了offsetHeight/clientHeight并调整内容div的顶部样式属性。内容div也需要有position:absolute;
和bottom:0px;
。
对不起,如果你对JS解决方案不感兴趣,我只是不认为没有一个CSS接受你想要实现的用户体验。
是的,我知道如何做到这一点与JS,但我不知道是否有办法做到这一点与CSS – Eagle 2009-11-24 13:20:32
你想要做的是定义2个div的总高度,其中一个是可变高度,其他占用视口的其余部分。真的,我只能看到脚本使用CSS的当前状态。 – 2009-11-25 22:47:43
您应该为第二个div定义固定宽度并使用overflow
css属性来定义滚动条。
还需要指定高度,否则您将无法获得滚动条,div将仅展开高度。 – Zoidberg 2009-11-24 11:22:15
为了用CSS来做,你需要在底部div上定义一个高度,然后添加overflow:auto。
不幸的是,这意味着您的顶部div也需要定义高度,因为内容必须占用页面上预定义的空间量。如果你使用百分比来表示高度,那么你将需要为你的页眉div定义一个高度,这样拉伸和缩小浏览器窗口不会引起问题。
这应该解决您的问题
#header{ overflow: hidden }
#content{ overflow-y: auto }
编辑:你必须定义的div的高度藏汉
但是divs填满了整个屏幕呢?其中一个应该是其内容的高度,第二个填充屏幕的其余部分? – Eagle 2009-11-24 12:56:50
这里有一个完整的CSS的解决方案 - http://jsfiddle.net/TUwej/2/
#container { width:500px; border:3px solid red; margin:0 auto; position:relative; }
#sidebar { position:absolute; left:0; top:0; width:150px; height:100%; background-color:yellow; overflow-y:scroll; }
#main { margin-left:150px; }
这与他所要求的无关。 – 2015-01-15 10:11:30
你能做到这一点,而不对头部DIV设置高度...但是如果头部中的内容变得太大,则冒着底部内容div运行到视图窗口底部的风险 – Zoidberg 2009-11-24 11:32:10