web-dev-qa-db-ja.com

ボディをブラウザの高さの100％にする

私は体をブラウザの高さの100％にしたいです。 CSSを使ってそれができますか？

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

ブラウザウィンドウ全体を埋めるようにページの背景色を設定したいのですが、ページにコンテンツがほとんどない場合は、一番下に醜い白いバーが表示されます。

htmlcssheight
686
bodyofheat

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

html, 
body {
    height: 100%;
}

Bodyは、動的プロパティの拡大・縮小方法を親（HTML）に確認するので、HTML要素にも高さを設定する必要があります。 

ただし、bodyの内容はおそらく動的に変更する必要があります。 min-heightを100％に設定すると、この目標を達成できます。

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

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

5.1.2。ビューポートの割合の長さ：「vw」、「vh」、「vmin」、「vmax」の単位

ビューポートパーセンテージの長さは、最初の包含ブロックのサイズに比例します。最初の包含ブロックの高さまたは幅が変更されると、それに応じて拡大縮小されます。

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

Example Here

body {
    height: 100vh;
}

body {
    min-height: 100vh;
}

これはほとんどの最近のブラウザでサポートされています - サポートはここで見つけることができます 。

174
Josh Crozier

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

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

これにより、コンテンツがビューポートよりも高い場合でもbodyタグは拡大し続けることができ、スクロールし始めたときに背景画像は繰り返し/スクロール/繰り返します。

IE6をサポートする必要がある場合は、体をheight:100%に固定する方法を見つける必要があります。IE6はheightをmin-heightのように扱います。

115
Angry Dan

余白を本体に残してスクロールバーを使用したくない場合は、次の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 のデモを参照してください。

68
dpatru
html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}
26
Catfish

文字通り私が使うすべての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>をmargin:-8px;にする必要がないことも意味します。

私が投稿する前に、私は他のフルスクリーンCSSプロジェクトを見て、そこで使ったのはbody{margin:0;}だけで、他には何もないことに気付きました。

この詳細な回答が役立つことを願っています、そして私はあなたの痛みを感じます。私の目には、ブラウザがbody/html要素の左側、時には上側に目に見えない境界線を設定すべきであることは愚かです。

19
MineAndCraft12

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

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％の幅を使用しても、そうはならないようです。

18
OwN

クイックアップデート

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

今日のCSSによるより良い解決策

html, body{ 
  min-height: 100vh;
  overflow: auto;
}
13
Jayant Varshney

ここに：

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}
4
Eddie

必要に応じてJSも使用できます

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

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}
3
Herbs

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

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

または、新しい方法でビューポートの高さを試してください。

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

ビューポート：あなたのビューポートを使用することがスクリーンの全高になるであろうどんなサイズのスクリーンコンテンツも意味するなら。

3
Ayyappan K

独自のCSSファイルを編集して高さのルールを自分で定義する作業が不要な場合は、最も一般的なCSSフレームワークでも、ページ全体を埋めるbody要素によって、この問題を解決できます。ビューポートのサイズ.

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

2
Filipe Freire

1行のCSSだけで…これで終わりです。

body{ height: 100vh; }
2
Sanjib Debnath

やってみる

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
2
ak-SE

追加してみてください。

body {
height: 100vh;
}
1
annasvst
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 +のすべての主要ブラウザで動作します。背景画像とグラデーションで動作します。コンテンツのニーズに応じてスクロールバーを利用できます。 

1
Corni

すべての答えは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デモです。

0
wasimv09

ここで更新 

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}
0
Anburaj_N

私はこれを使うだろう

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は、画面のサイズを変更するときにbodyとhtmlの高さを（モバイルサイズなどに）拡大する場合に必要です。

0
medBouzid