2

基本的に、兄弟の div、ヘッダー、コンテンツ、フッターがいくつかあります。ウィンドウのサイズが変更されたときに、ヘッダーとフッターによって残された親のスペースをコンテンツで動的に埋める必要があります。

それらのすべてまたは一部で height:100% を使用しようとしましたが、常に要素が高すぎます。スクロールバーは必要ありません。これは CSS だけで行うことができますか、それとも Jquery を使用する必要がありますか?

http://jsfiddle.net/2fnA7/

HTML

<html class="fill">
    <body class="fill">
        <div>header</div>
        <div class="content">content</div>
        <div>footer</div>
    </body>
</html>

CSS

.fill
{
    height:100%;
}
.content
{
    height:100%;
}
4

4 に答える 4

1

ヘッダーとフッターの高さを固定している場合は、コンテンツ div ie の上部と下部の両方を設定することでこれを行うことができます

<style type="text/css">
html, body{width: 100%; height: 100%; margin: 0; padding: 0}
.header{position: absolute; top: 0; width: 100%; height: 100px; background: #888}
.content{position: absolute; width: 100%; top: 100px; bottom: 100px}
.footer{position: absolute; bottom: 0; width: 100%; height: 100px; background: #888}
</style>
于 2012-09-19T15:40:05.197 に答える
0

これは機能しています
。ヘッダーとフッターはピクセルに基づいており、コンテンツはパーセントに基づいています。
page.html

<style>
.header
{
    background-color:#222;
    padding:5px;
    position: absolute;
    top: 0px;
    left:0px;
    right:0px;
    height:100px;
}
.content
{
    background-color:#CCC;
    padding:5px;
    position: absolute;
    top: 100px;
    bottom: 50px;
    left:0px;
    right:0px;
}
.footer
{
    position:absolute;
    bottom: 0px;
    border:1px;
    height:50px;
    background-color:#09F;
    left:0px;
    right:0px;
}

</style>
<div class="header">1</div>
<div class="content">2</div>
<div class="footer">3</div>
于 2012-09-19T16:37:07.293 に答える
0

ボックスの高さはコンテナーの 100% ですが、境界線とそこにフッターがあることも考慮する必要があります。

したがって、全高は次のとおりです。

コンテナーの高さ + ボーダーの合計 + フッターの高さ。

これにより、スクロールバーが強制されます。

于 2012-09-19T15:35:18.130 に答える
0

この効果をシミュレートする方法は多数ありますが、それぞれに妥協点があります。

1位。固定ヘッダー、フッター、上下のセット: jsFiddle 妥協、要素のサイズは固定され、デザインは固定されているため、コンテンツ駆動型ではありません。すべてが絶対的に配置されているため、将来の更新が難しくなる可能性があります。

2番目。パーセンテージ比率: jsFiddle Compromise、コンテンツ領域だけでなく、すべてがスケーリングされます。つまり、画面が大きいほど、ヘッダーとフッターも大きくなります。

3番目。混ぜ合わせて、修正されたものを修正し、柔軟にする必要があるものを柔軟のまま にします。

これらの方法のいずれかを使用する必要はありません。コンテンツを見て、コンテンツに最大のスペースと最適な外観を与える方法を組み合わせてください。のような CSS プロパティcalc()により、時間の経過とともにこれが容易になりますが、ブラウザが最初にそこに到達する必要があります。

ヘッダーとフッターが大きくなりすぎるのを制限する必要がある場合は、オプション 2 が最も柔軟であり、最小高と最大高を実装することをお勧めします。( jsFiddle )

于 2012-09-19T16:10:11.853 に答える