web-dev-qa-db-ja.com

divをページの下部に拡張（HTMLとCSSのみ）

その非常に単純な問題ですが、オンラインで適切な解決策を見つけることができないようです。最後の要素がページの下部に拡張された自然なフローの要素のリストが必要です。だから私が持っている場合

<div id="top" style="height:50px;"></div>
<div id="bottom" style="background:lightgrey;"></div>

bottomの下部からページの下部まで拡張するには、要素topが必要です。 htmlとcssのみを使用するソリューションは歓迎です。bottom divの動的なサイズ変更を取得できる限り、コンテナdivなどを追加できます。

編集：bottomのサイズを変更する場合はbottomを調整するため、topの値をハードコーディングしたくない

ここにすべてのいじる必要があるためのフィドルがあります： http://jsfiddle.net/8QnLA/

htmlcssposition
27
woojoo666

解決策：＃1：cssテーブル：

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen＃1（小さなコンテンツ）

Codepen＃2（コンテンツのロット） （

解決策2：計算単位とビューポート単位を使用する

#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  min-height: calc(100vh - 50px);
}

body {
  margin: 0;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  min-height: calc(100vh - 50px);
}

Where `min-height: calc(100vh - 50px);` means:

'Let the height of the content div be **at least** 100% of the viewport height minus the 50px height of the header.'
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen＃1（小さなコンテンツ）

Codepen＃2（コンテンツのロット） （

解決策3-フレックスボックス

body {
  margin: 0;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  flex: 1;
}

body {
  margin: 0;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  flex: 1;
}
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen＃1-少しのコンテンツ

Codepen＃2-大量のコンテンツ

52
Danield

html, bodyの高さを100%に設定します。次に、最後の<div>の高さを100%に設定すると、ウィンドウと同じ高さになります。おそらくスクロールしたくないので、overflow: hiddenにもhtml, bodyを設定できます。

http://jsfiddle.net/GKbzx/

3
Explosion Pills