jquery – 在固定高度页面中带有滚动条的Div

我有这个 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？

提前致谢！

解决方法

绝对定位元素时,它会从页面流出来.请看看这个小提琴.请注意,绿色框会显示两个垂直滚动条.

http://jsfiddle.net/gX2DG/

要获得仅出现在标题下方的单个滚动条,您需要修改CSS.此CSS仅适用于固定高度标头.

>在html / body上清零边距/填充并设置overflow：hidden以便它们不会触发主浏览器滚动条
>将body设置为100％高度,以便我们可以在其内部的div上设置100％
>绝对定位将包含可滚动内容的子div.然后使用左,右,顶部,底部来拉伸它以填充屏幕.

http://jsfiddle.net/J4Ps4/

/* 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;
}

jquery – 在固定高度页面中带有滚动条的Div

解决方法

相关文章