html - css 高さ 画面下まで - ボディの高さをブラウザの高さの100%にする

CSS height: 100 はみ出る / html / css / height

ボディの高さをブラウザの高さの100%にしたいです。CSSで実現できますか?

Josh Crozier



Answer #1

様々なシナリオを検証した結果、これがベストなソリューションだと考えています。

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

そうは言っても、ここに投稿された回答にはいくつかの問題があります

html, body {
    height: 100%;
}

スクロールすると、背景が繰り返し表示されていることに気づきますか?これは、body要素の高さが、子テーブルのオーバーフローによって増えていないために起こります。なぜ、他のブロック要素のように拡張しないのでしょうか?よくわかりません。ブラウザの処理が間違っているのではないでしょうか。

html {
    height: 100%;
}

body {
    min-height: 100%;
}