我有这个
HTML结构：
<body>
<div id="container">
<div id="header">Not empty</div>
<div id="content">
<div id="inner_header">Not empty</div>
<div id="scrollable_content">Very long content</div>
</div>
</div>
</body>
我希望页面的固定高度等于屏幕的高度,我还想要一个div scrollable_content的垂直滚动条.
我试过这些样式,但我得到的页面比屏幕大,所以我得到两个滚动条：
html,body {
height:100%;
}
div#container {
height:100%;
}
div#scrollable_content {
height:100%;
overflow-y:auto;
position:absolute;
}
我怎么能用CSS3做到这一点？
编辑：我找到了一个使用jQuery的解决方案(见下文).我想知道这是否可以仅使用CSS3？
提前致谢！
解决方法
绝对定位元素时,它会从页面流出来.请看看这个小提琴.请注意,绿色框会显示两个垂直滚动条.
要获得仅出现在标题下方的单个滚动条,您需要修改CSS.此CSS仅适用于固定高度标头.
>在html / body上清零边距/填充并设置overflow：hidden以便它们不会触发主浏览器滚动条
>将body设置为100％高度,以便我们可以在其内部的div上设置100％
>绝对定位将包含可滚动内容的子div.然后使用左,右,顶部,底部来拉伸它以填充屏幕.
/* set body to 100% so we can set 100% on internal divs */
/* zero margin/padding and set overflow to hidden to prevent default browser scrollbar */
html,body { height:100%; margin: 0; padding: 0; overflow: hidden; }
div { margin: 0; padding: 0; }
/* on child div give it absolute positioning and then use top/bottom to stretch it */
/* top must be equal to the height of the header */
div#scrollable_content {
position: absolute;
top: 50px;
bottom: 0px;
width: 100%;
overflow-y:auto;
border: 1px solid green;
}
