2

私は簡単なページを持っています。ここでは、固定ヘッダーと固定フッター、およびコンテンツの本文をスクロール可能にしたいと考えています。

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 だけを使用してこれを達成する方法はありますか。はいの場合、どのように？

4

2 に答える 2

3

とても簡単で、次のように変更するだけです

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

これをチェックしてくださいhttp://jsfiddle.net/rCV6E/1/

于 2013-09-15T12:07:56.140 に答える
0

css を次のように使用してみてください。

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

オーバーフローをscrollおよび.headerに、.footer位置を に設定しfixedます。

于 2013-09-15T12:08:40.183 に答える