在固定高度页面中使用滚动条划分

Question

在固定高度页面中使用滚动条划分

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

Run Code Online (Sandbox Code Playgroud)

我希望页面的固定高度等于屏幕的高度,我还想要div的垂直滚动条scrollable_content.

我试过这些样式,但我得到的页面比屏幕大,所以我得到两个滚动条:

html, body {
    height:100%;
}
div#container {
    height:100%;
}
div#scrollable_content {
    height:100%;
    overflow-y:auto;
    position:absolute;
}

Run Code Online (Sandbox Code Playgroud)

我怎么能用CSS3做到这一点？

编辑:我找到了一个使用jQuery的解决方案(见下文).我想知道这是否可以仅使用CSS3？

提前致谢!

Answer 1

mrt*_*man 12

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，1 月前
查看次数：	22768 次
最近记录：	12 年，7 月前