0

ヘッダー、フッター、コンテンツの 3 つの要素を含むページを作成しようとしています。名前が示すように、ヘッダーを一番上に、フッターを一番下に、コンテンツをその間に配置します。ヘッダーとフッターを本来あるべき場所に配置するレイアウトを既に作成しましたが、コンテンツがそれらに重なっているか、逆にコンテンツが小さくなっているはずです。

私の問題は、ヘッダーとフッターがさまざまなことに使用されるため、高さに関しては動的であることです。

ヘッダーとフッターの間に残っているスペースをコンテンツで埋める方法はありますか?

可能であれば、純粋な CSS を希望しますが、それが不可能な場合は、JavaScript の提案もお願いします。:)

ありがとう！

編集：これは私がatmを得たものです。

<div class="container">
    <div id="header"></div>
    <div id="footer"></div>
    <div id="content"></div>
</div>

CSS:

#content {
    position:absolute;
    background: url('img/textures/fabric.png');
    background-color: gray;
    height:auto;
    width:auto;
    margin:0 auto 0 48px; /* Center content */
    left:0;
    right:0;
    top:0;
    bottom:0;
    text-align:center;  
}

#dashtop {
    position:fixed;
    width:auto;
    background-color:aqua;
    opacity: .5;
    margin-left: 48px;
    top:0;
    left:0;
    right:0;
    text-align:center;
}

#footer {
    position: fixed;
    margin-left: 48px;
    background-color:green;
    bottom:0;
    right:0;
    left:0;
    width:auto;
    height:auto;
    text-align:center;
    opacity:0.5;
    z-index:0;

}

4

1 に答える 1

1

ヘッダーとコンテンツの両方に相対位置を使用し（位置属性なし）、フッターに固定位置を使用します。

于 2012-08-22T09:40:30.133 に答える