html - コンテナの高さを画面に合わせる

コンテナdivをウィンドウの高さ全体に合わせたい場合は、以下のHTMLがあります。これはワインを動作させますが、コンテナ内の青いdivを2つ削除するとどうなりますか？コンテナは、その内側の青いdivの下に伸びますが、ウィンドウの下には伸びません。溶液？html - コンテナの高さを画面に合わせる

jsfiddle：あなたは解決策をCSSに固執する場合https://jsfiddle.net/xnt014a8/

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 

    <style> 
     body, html { 
     min-height: 100%; 
     padding: 0; 
     margin: 0; 
     } 

     #container { 
      height: 100%; 
      background: coral; 
      padding: 0; 
      margin: 0; 
      width: 63.4%; 
      margin-left: 36.6%; 
      min-height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
    <div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"></div> 
    <div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"></div> 
    <div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"></div> 
    </div> 
</body> 
</html>

出典

2016-03-31 Mister_L

は 'VHが' スタイルで '％' のinstaed使用することです。 VHので

#container { 
    height: 100vh; 
    min-height: 100vh; 
... 
}

はあなたの問題を解決する必要があり

（....あなたのビューポートの1VP = 1％、ビューポートの2VH = 2％）ビューポートの高さを表しています。（すべての主要なブラウザで動作します：http://caniuse.com/#search=vh）

出典

2016-03-31 11:53:38 mikesp

だけ100vhを使用する代わりに100%

#container { 
      height: 100vh; 
      background: coral; 
      padding: 0; 
      margin: 0; 
      width: 63.4%; 
      margin-left: 36.6%; 
      min-height: 100%; 
     }

この情報がお役に立てば幸いです、あなたはコンテナは常にビューの高さを持っていることをしたい場合は、そのシンプル！

出典

2016-03-31 11:53:51 Roman

変更にbody, htmlスタイル：あなたは最小の高さ、ただ単に設定し、高さは必要ありません

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

#container { 
    min-height: 100vh; 
}

出典

2016-03-31 11:54:22 Pimmol

-1

：100％;.

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

 
      #container { 
 
       height: 100%; 
 
       background: coral; 
 
       padding: 0; 
 
       margin: 0; 
 
       width: 63.4%; 
 
       margin-left: 36.6%; 
 
      }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div style="height: 255px; width: 200px; margin-bottom: 10px; background: blue"></div> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-03-31 11:54:52 Maki

挙げコード下記の使用：

body, html { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
#container { 
    min-height: 100%; 
    background: coral; 
    padding: 0; 
    margin: 0; 
    width: 63.4%; 
    margin-left: 36.6%; 
}

出典

2016-03-31 12:25:54

3つの青のdivが存在する場合、私はまだ最も低い青DIVの底部と底部との間の小さな白いギャップを見ることができます窓の –

html - コンテナの高さを画面に合わせる

答えて

関連する問題