html - 拉伸容器高度以適應屏幕

我有下面的HTML，我想要容器div拉伸到窗口的整個高度。這適用於葡萄酒，但是當您移除容器內的兩個藍色div時會發生什麼？容器延伸到裏面的藍色div的底部，但不延伸到窗口的底部。解？html - 拉伸容器高度以適應屏幕

的jsfiddle：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

如果你想堅持的CSS的解決方案是使用了 'VH' instaed在風格的 '％'。 VH表示視口的高度（1VP視口的= 1％，視口的2VH = 2％....）

所以

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

應該解決問題。（適用於所有主要的瀏覽器：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 - 拉伸容器高度以適應屏幕

回答

相關問題