ボディにブラウザの高さの100％を持たせる

844

ブラウザの高さを100％にしたい。CSSを使用してそれを行うことはできますか？

を設定してみましたheight: 100%が、うまくいきません。

ページの背景色をブラウザウィンドウ全体に設定したいのですが、ページのコンテンツが少ない場合、下部に醜い白いバーが表示されます。

html  css  height 
— bodyofheat
ソース
2
— ジョシュ・クロージャー

回答:

1092

html要素の高さも100％に設定してみてください。 

html, 
body {
    height: 100%;
}

Bodyは動的プロパティのスケーリング方法を親（HTML）に確認するため、HTML要素にも高さを設定する必要があります。

ただし、ボディのコンテンツはおそらく動的に変更する必要があります。min-heightを100％に設定すると、この目標が達成されます。

html {
  height: 100%;
}
body {
  min-height: 100%;
}
— BentOnCoding
ソース
6
おかげで、これは短いページの白いバーを削除するようですが、ブラウザウィンドウの高さを超える高さのページでは、下部に20pxの白いバーが表示されます。
— bodyofheat
48
わかった！html、body {min-height：100％;}を追加すると機能します：D
— bodyofheat
12
注：body {min-height}バージョンを使用する場合、.body-child{height: 100%}トリックは使用できません。
— Salman A 14
14
最良の答えは、CSS3を使用することですvh-> body { height: 100vh }-ここで答えを確認してくださいstackoverflow.com/a/25829844/2680216
— Adriano Resende
2
@bFuncこのクロムの問題があります。html {height：100％;} body {height：auto}が仕事をします。
— GBMan
217

htmlとbody要素の両方の高さをに設定する代わりに100%、ビューポートのパーセンテージの長さを使用することもできます。

5.1.2。ビューポートのパーセンテージの長さ：「vw」、「vh」、「vmin」、「vmax」の単位

ビューポートのパーセンテージの長さは、最初の包含ブロックのサイズを基準にしています。最初の包含ブロックの高さまたは幅が変更されると、それらはそれに応じてスケーリングされます。

この場合、100vhビューポートの高さである値を使用できます。

ここの例

body {
  height: 100vh;
  padding: 0;
}
body {
  min-height: 100vh;
  padding: 0;
}

これは、最新のほとんどのブラウザでサポートされています。サポートはこちらで確認できます。

— ジョシュ・クロジエ
ソース
4
これは非常に単純であるという事実に加えて、新しいプラクティスを採用することも良いことです。
— パンワンペラウォン2015年
3
@niaster間違いなく同意します。私もこの回答を投稿して以来、ブラウザーのサポートはすでに改善されています:)
— Josh Crozier '29
1
@incarnateええ..残念すぎるわけではない:) OPが最後にオンラインであったのは7/11/11（質問が行われた日付）だったようです。
— Josh Crozier 2015
18
古いプラクティスがうまく機能しているのに、なぜ「新しいプラクティスの採用」を開始する必要があるのか​​わからない。これを行う利点はありません。コードは小さくなく、パフォーマンスも良くありません。また、vw / vhをサポートしないブラウザーがまだ存在しています。
— cimmanon
3
Chromeユーザーエージェントスタイルシートは、デフォルトで本文に8ピクセルのマージンを追加します（他のブラウザーについては不明です）margin: 0;。
— Andy Raddatz 2016
121

背景画像がある場合は、代わりにこれを設定する必要があります。

html{
  height: 100%;
}
body {
  min-height: 100%;
}

これにより、コンテンツがビューポートよりも高いときにbodyタグが引き続き成長し、下にスクロールし始めたときに背景画像が繰り返し/スクロール/何であれ続けます。

IE6をサポートする必要がある場合はheight:100%、体のためにくさびを入れる方法を見つける必要があることを覚えておいてください。IE6はとにかくheight同じように扱いmin-heightます。

— 怒ったダン
ソース
ボディの真下にグローバルフレックスボックスがある場合にも機能します（body>＃flexbox-wrapper）
— justnorris
2
これは正解です。コンテンツが1つの画面より長くなると、受け入れられる答えは大きくなりません。
— SimplGy 2013年
Angry Danさん、ありがとうございました。私のサイトの下部にある醜い空白がなくなりました。
— ボリス・バーコフ2014年
もちろん、この問題が提起されたため、ビューポートに基づく寸法は物事になりました。だから今、あなたはただやることができますbody{min-height: 100vh}
— Angry Dan
またbody { height: auto; }、FireFoxにスクロールバーが表示されないようにする必要もあります。それ以外は、完全に動作します。
— 2016年
82

本文のマージンを維持したいが、スクロールバーは必要ない場合は、次のcssを使用します。

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

設定 body {min-height:100%} するとスクロールバーが表示されます。

http://jsbin.com/aCaDahEK/2/edit?html,outputにあるデモを参照してください。

— ダニエル・パトル
ソース
7
唯一の有効な回答をありがとう:)私は「絶対」がそれを機能させたと思います
— Dmitry Matveev
スクロールバーなしのFirefoxでうまく動作します。ありがとうございます。受け入れられた答えはしません。
— Andrew
@Andrew奇妙なことに、これによりFireFoxにスクロールバーが表示されます。あなたが受け入れ答えにしかし必要なのであるheight: auto;にbodyスクロールバーが今ポップアップ表示するためにも句。
— 2016年
@Torxedこれでも、FireFoxでスクロールバーが表示されます。高さに自動設定を追加することは私にはうまくいかなかったようです:(
— Travis Crum
これはChrome 56.0.2924.87（64ビット）では機能しませんでした。
— ライアン
24

さまざまなシナリオをテストした後、これが最良の解決策だと思います。

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

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

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

その中でそれは動的でありhtmlかつbodyその内容のオーバーフロー場合要素が自動的に拡張されます。これをFirefox、Chrome、IE 11の最新バージョンでテストしました。

ここで完全なフィドルを参照してください（テーブルが嫌いな場合は、divを使用するようにいつでも変更できます）。

https://jsfiddle.net/71yp4rh1/9/

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

html, body {
    height: 100%;
}

上記のCSSを使用すると、次のようにコンテンツがオーバーフローしても、htmlおよびbody要素が自動的に展開されません。

https://jsfiddle.net/9vyy620m/4/

スクロールすると、背景の繰り返しに気づきますか？これは、子テーブルがオーバーフローしたためにbody要素の高さが増加していないために発生しています。他のブロック要素のように展開しないのはなぜですか？よく分かりません。ブラウザはこれを正しく処理しないと思います。

html {
    height: 100%;
}

body {
    min-height: 100%;
}

上記のようにボディの最小高さを100％に設定すると、他の問題が発生します。この場合、次に示すように、子divまたはテーブルが高さの割合を占めるように指定することはできません。

https://jsfiddle.net/aq74v2v7/4/

これが誰かを助けることを願っています。ブラウザはこれを間違って処理していると思います。子供がオーバーフローした場合、体の高さは自動的に大きくなるように調整されると思います。ただし、100％の高さと100％の幅を使用する場合、これは発生しないようです。

— 自分の
ソース
3
このページの投票数の多い回答をすべて試しましたが、どれもうまくいきませんでした。これはやった！
— Ryan
この答えは受け入れられるべきです。height: 100vh解決策もないではありません。最上位のコンテナーを100vh高く設定すると100vw、コンテナーにスクロールバーがある場合に問題が発生する可能性があります-コンテナーは本来よりも大きくなります（スクロールバーが不必要に表示される可能性があります）。またheight: 100vh、新しいAndroidデバイス（例：Xiaomi Mi 9とAndroid 9）で問題が発生しました。コンテナーが画面自体よりも大きくなり、ドキュメントの本文に不要な垂直スクロールバーが表示されます。
— jtompl
21

文字通り、私が使用するすべてのCSSファイルの最初に使用するものは次のとおりです。

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

マージンを0にすると、HTML要素とBODY要素がブラウザによって自動配置されず、それらの左側または右側にスペースが確保されます。

パディング0は、ブラウザーのデフォルトのために、HTML要素とBODY要素が要素内のすべてを自動的に押し下げたりしないことを保証します。

幅と高さのバリアントは100％に設定されており、実際に自動設定されたマージンまたはパディングがあることを見込んでブラウザーがそれらのサイズを変更しないようにします。おそらくそれらは必要ありません。

私は最初の数年前にHTMLとCSSに始まったときのように、あなたが最初に与える必要がないだろう、というこのソリューションはまた、手段<div>A margin:-8px;は、ブラウザウィンドウの隅に収まるようにするが。

投稿する前に、他のフルスクリーンCSSプロジェクトを調べたところ、そこで使用していたのはbody{margin:0;}他に何もないことでした。これは、これまで取り組んできた2年間で問題なく機能しました。

この詳細な回答がお役に立てば幸いです。私の目には、ブラウザがbody / html要素の左側、場合によっては上側に目に見えない境界線を設定する必要があるのはおかしいです。

— MineAndCraft12
ソース
width: 100%body要素とhtml要素の考えられる目的は何ですか？はい、私は理解しています、実用的な観点からbody { margin: 0; }は、ほとんどの場合十分であるはずです。もっと深く理解したいだけです。
— john cj 2017年
21

クイックアップデート

html, body{
    min-height:100%;
    overflow:auto;
}

今日のCSSによるより良いソリューション

html, body{ 
  min-height: 100vh;
  overflow: auto;
}
— ジャイアント・ヴァーシュニー
ソース
2
これは既存の回答とどのように違うのですか？
— cimmanon
3
他の人も試しましたが、うまくいきませんでした。これは機能したので、困っている人への解決策になる可能性があります。@cimmanon
— Jayant Varshney、2015
私はこれが他の高票の回答以外に私のために働くと言わなければなりません。overflow: autoここで魔法をやってください。ところで、Chromeを使用しています。
— SkuraZZ 2018年
オーバーフローしたコンテンツで高さのサイズを変更できる唯一のオプション（私が見つけた）。
— Daniel Sharp
6

ここに：

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}
— エディ
ソース
4

必要に応じてJSを使用することもできます

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}
— ハーブ
ソース
しかし、これを行うには、jQueryライブラリやJavaScriptでの記述など、必要以上に多くのものを追加する必要がありますが、これはCSSで行うことができます。
— フロントエンド開発者
3

試す

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
— ak-SE
ソース
2
width: 100%body要素とhtml要素の考えられる目的は何ですか？はい、私は理解しています、実用的な観点からbody { margin: 0; }は、ほとんどの場合十分であるはずです。もっと深く理解したいだけです。
— john cj 2017年
3

これを確認してください：

* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}

または、新しいメソッドのビューポートの高さを試してください：

html, body { width: 100vw; height: 100vh;}

ビューポート：ビューポートを使用すると、画面のコンテンツが画面の高さいっぱいに表示されます。

— アイヤパンK
ソース
この答えを見つけた人が理解できるように、ソリューションの説明を含めてください。ありがとう！
— Shawn、
width: 100%body要素とhtml要素の考えられる目的は何ですか？
— john cj 2017年
たとえば、50列と1000行のテーブルに
— 1000〜9999の
3

独自のCSSファイルを編集して高さのルールを自分で定義したくない場合、最も一般的なCSSフレームワークは、ボディ要素がページ全体を埋めるこの問題を解決します。ビューポートのサイズ。

たとえば、Tacit CSSフレームワークはこの問題をすぐに解決します。CSSルールとクラスを定義する必要はなく、CSSファイルをHTMLに含めるだけです。

— フィリップ・フレイレ
ソース
2 
html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

すべての主要なブラウザーで動作します：FF、Chrome、Opera、IE9 +。背景画像とグラデーションで動作します。スクロールバーはコンテンツのニーズに応じて利用できます。

— Corni
ソース
2

私はこれを使います 

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }
<html>
    <body>
    </body>
</html>
スニペットを展開

ブラウザーが使用min-height: 100vhし、何らかの理由でブラウザーが少し古いmin-height: 100%場合は、フォールバックになります。

これoverflow: autoは、画面のサイズを変更するときにボディとhtmlの高さを拡張する場合に必要です（たとえば、モバイルサイズに）。

— medBouzid
ソース
1

すべての答えは100％正確で、十分に説明されていますが、応答性を高めるために、何か良いことや非常に簡単なことをしました。

ここでは、要素はビューポートの100％の高さになりますが、モバイルビューの場合、縦向きビュー（モバイル）では特に見栄えがよくないため、ビューポートが小さくなると、要素は折りたたまれて互いに重なります。少し反応が遅くなるのがコードです。誰かがこれから助けを得ることを願っています。

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

こちらがJSfiddle Demoです。

— wasimv09
ソース
0

ここで更新

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}
— Anburaj_N
ソース
-1

下部の余分なスペースについて：ページはASP.NETアプリケーションですか？もしそうなら、おそらくあなたのマークアップのほとんどすべてを包んでいるでしょう。フォームにもスタイルを設定することを忘れないでください。overflow:hidden;フォームに追加すると、下部の余分なスペースが削除される場合があります。

— Cockypup
ソース
6
本当に正当な理由がない限り、overflow：hiddenの使用はお勧めしません。物事がオーバーフローしている理由を
— 調べ、
-1 
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }
— ブレーカーを想像してください
ソース
width: 100%body要素とhtml要素の考えられる目的は何ですか？はい、私は理解しています、実用的な観点からbody { margin: 0; }は、ほとんどの場合十分であるはずです。もっと深く理解したいだけです。
— john cj 2017年
-5

CSS3には新しいメソッドがあります。

 height:100vh

これにより、ビューポートが高さと100％になります。

だからあなたのコードは 

 body{
 height:100vh; 
 }
— シルバチャトゥラ
ソース
5
これは、1年前に9月に投稿した回答とどう違うのですか？
— Josh Crozier 2015
1
なぜあなたは二重回答ですか？
— Adriano Resende
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.