web-dev-qa-db-ja.com

divを作成してヘッダーdivとフッターdivの間のすべてのスペースを埋める方法

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

csshtml-table
54
Jeremy

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

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

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;
}
29
Reggie Pinkham

要約すると（そして、これは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>
33
Jeremy

ミッチェルセラーズの回答を拡張するには、コンテンツdivの高さを100％にして、自動マージンを設定します。

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

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

コンテンツがウィンドウよりも大きい（大きい）場合、絶対位置は問題を引き起こします。

8
Traingamer

CSSグリッドを使用してこれを行う方法：

index.html

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <header>Header</header>
      <section>Content</section>
      <footer>Footer</footer>
    </main>
  </body>
</html>

main.css

body {
    margin: 0;
}
main {
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 100px;
}
section {
    height: 100%;
}
1
Allen