58

私は、レイアウト目的でのテーブルの使用から div の使用への移行に取り組んでいます (はい、はい、大きな議論です)。ヘッダー、コンテンツ、フッターの 3 つの div があります。ヘッダーとフッターはそれぞれ 50px です。フッター div をページの下部に配置し、コンテンツ div でその間のスペースを埋めるにはどうすればよいですか? 画面の解像度が変わる可能性があるため、コンテンツ div の高さをハードコーディングしたくありません。

4

7 に答える 7

37

フレックスボックス ソリューション

フレックス レイアウトを使用すると、自然な高さのヘッダーとフッターを可能にしながらこれを実現できます。ヘッダーとフッターの両方がビューポートの上部と下部にそれぞれ固定され (ネイティブ モバイル アプリと同様)、メイン コンテンツ領域が残りのスペースを埋め、垂直方向のオーバーフローはその領域内でスクロール可能になります。

JSフィドルを参照してください

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}
于 2016-07-28T04:40:17.490 に答える
35

要約すると (これは、Traingamer が提供するCSS スティッキー フッターリンクから取得したものです)、これは私が使用したものです。

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>
于 2008-10-16T23:13:03.427 に答える
8

Mitchel Sellers の回答を拡張するには、コンテンツの div の高さ: 100% を指定し、自動マージンを指定します。

詳細な説明と例については、Ryan Fait のCSS Sticky Footerを参照してください。

ヘッダーのサイズ (高さ) がわかっているので、コンテンツ div 内に配置します (またはマージンを使用します)。

コンテンツがウィンドウよりも大きい (高い) 場合、絶対位置を指定すると問題が発生します。

于 2008-10-16T16:58:33.883 に答える
-4

コンテンツdivの高さを最大化しようとしている場合は、CSSで追加します

高さ：100％;

于 2008-10-15T22:02:27.110 に答える
-9 
#footer {
 clear: both;
}
于 2008-10-16T17:25:46.280 に答える