0

ヘッダー、ミドル、フッターの領域を持つ典型的なレイアウトを実現しようとしています。特に、フッターが表示されている画面の下部よりも高くならないようにしたいと考えています。別の言い方をすれば、ミドルに短いコンテンツがある場合、フッターはページの一番下に配置する必要があります。Middle に高さのあるコンテンツがある場合、Footer はフォールドの下に配置でき、Middle コンテンツの下部より下に配置する必要があります。

追加の制約の 1 つは、大量の既存の HTML を使用して作業しているため、大規模に変更することはできません。ほとんどの場合、関連する CSS のみを変更できます。中間領域は、テーブル タグの場合もあれば、div の場合もあります。そこに問題があります-ここではdivとテーブルの動作が異なります（最新のChrome、Safari、およびFF）。

table と div の両方で機能する CSS を使用できます (そして、デスクトップ ブラウザーの合理的な範囲で機能します。過去 3 年間のことは何でも言えます)。

< table > ベースのページの場合、css は次のように設定されます。

  • サイズ html & body から幅 & 高さ 100%、余白なし
  • フッターの高さは 20 ピクセルに固定され、余白はありません
  • ヘッダーの高さは 100px に固定され、余白はありません
  • 中間の高さは 100%
  • 中央には -20px の上余白と -100px の下余白があります

< table >に望ましい効果があるのはどれですか:

  • html、body、および Middle の 100% の高さにより、Middle は少なくともウィンドウと同じ高さになります。
  • 中央の余白には、中央領域をヘッダーの下のページの上部に引き寄せ、フッターを引き上げて中央の下部に配置する効果があります。

ただし、 < div > の場合は失敗します。「引っ張る」効果は同じで、うまく機能します。しかし、divの高さは、ヘッダーの高さにウィンドウの高さを加えたもののようです。

さまざまなピースのボックス モデルを微調整してみました。「display:table;」を試してみました divで。

この問題を示す HTML を次に示します。「display: none;」を削除するだけです。for div.middle または table.middle でそれぞれの動作を確認します。

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            margin: 0;
            height: 100%;
            width: 100%;
        }
        .header { 
            width: 90%;
            height: 100px; 
            background: rgba(0,255,0,.25); 
        }
        table.middle { 
            display: none; 
            box-model: border-box; 
            height: 100%;
            margin-bottom: -20px;
            margin-top: -100px;
            padding-top: 100px;
            width: 100%;
            background: rgba(255,0,0,.25); 
        }
        div.middle { 
            display: none;
            box-model: border-box; 
            height: 100%;
            margin-bottom: -20px;
            margin-top: -100px;
            padding-top: 100px;
            width: 100%;
            background: rgba(255,0,0,.25); 
        }
        .footer {
            width: 90%;
            height: 20px;
            background: rgba(0,0,255,.25); 
        }
    </style>
</head>
<body>
    <div class="header">
        header
    </div>
    <table class="middle"><tr><td>
        body
    </td></tr></table>
    <div class="middle">
        body
    </div>
    <div class="footer">
        footer
    </div>
</body>
</html>
4

1 に答える 1

1

[更新された回答]

ここで何が起こっているかがわかります。合計の高さが 100% + 100px になるあなたのdiv持っています。padding-top:100pxあなたtableは同じことをしていますがtable、それが問題を引き起こさないように奇妙なことをします。たとえば、 はtable常に伸びて、 がそうでdivはない方法でスペースを埋めます。「体」という言葉があなたの中心にあるが、あなたの中心にtableないことに注意してくださいdiv。

padding-top:100px;CSSからを削除するdivと、問題が修正されますが、中央の領域がヘッダーと重なっています。HTML を編集することはできないため、CSS を使用してメイン セクションの最初の要素にmargin-topを100px指定し、div. このようなものが動作するはずです:

div.middle:first-child{
   margin:top: 100px;
}

[古い回答]

ここに私のソリューションを含む JSFiddle があります。基本的に全体を容器に包みdiv、

<div class="container">
   [all your HTML]
</div>

...そしてそれmin-heightに 100% を与えます。この方法では、コンテンツが小さいときはコンテナーが 100% になりますが、コンテンツが 100% を超えると拡張されます。

.container { 
    min-height: 100%;
    position: relative;
}

また、何があってもposition:relativeフッターを下端にくっつけるように絶対に配置する必要があるため、これを作成します。

.footer {
    position: absolute;
    bottom: 0px;
}

例を確認するには、私のJSFiddledivを参照してください。あなたとあなたの両方で動作しますtable。

PS: 高さを指定しましたが、大きい/小さいコンテンツのより良いエミュレーションは、ピクセルを使用することです。たとえば、 と の間で100%切り替えます。また、フッターを絶対にするとドキュメントの流れから削除されるため、それらはもう必要ないため、それらから削除しました。60px600pxmargin-bottom:-20px

于 2013-06-28T18:17:22.743 に答える