如何在不使用javascript的情况下使内容div可滚动

时间:2013-09-15 12:05:37

标签: javascript html css

我有一个简单的页面。在这里,我想要一个固定的页眉和一个固定的页脚,并且内容的主体可以滚动。

HTML

<div class="container">
    <div class="header">This is Header</div>
    <div class="body">This is Body
        <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body</div>
    <div class="footer">This is Footer</div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    height: 100%;
    background: #DDD;
}

.header {
    width: 100%;
    height: 40px;
    background: red;
    position: absolute;
    top: 0;
}

.footer {
    width: 100%;
    height: 40px;
    background: green;
    position: absolute;
    bottom: 0;
}

.body {
    width: 100%;
    background: blue;
    overflow: auto;
}

然而,当我滚动时,整个页面往往会滚动,使我的页眉和页脚移动。 我可以使用javascript解决此问题,获取屏幕高度并减去页眉和页脚高度。

但是我们有什么办法可以用css实现这个目标。如果是,那么如何?

2 个答案:

答案 0 :(得分:3)

非常简单,只需像这样进行更改

.body {
    width: 100%;
    background: blue;
    overflow: auto;
    position: absolute;
    bottom: 40px;
    top: 40px;
}

选中此http://jsfiddle.net/rCV6E/1/

答案 1 :(得分:0)

尝试将css用作:

.body {
    width: 100%;
    background: blue;
    overflow: scroll !important;
}

将溢出设置为scroll.header,将.footer位置设置为fixed