Flex Div的高度不是100％

Question

我身體全高，但最小高度為100％的包含div不會填充。 我希望藍色填充它的身體容器並彎曲對齊內部div。

https://codepen.io/steventnorris/pen/oVdKqY

 html { min-height: 100%; width: 100%; } body { min-height: 100%; width: 100%; background-color: green; } .main { display: flex; flex-direction: row; min-height: 100%; justify-content: space-between; background-color: blue; } 

 <div class="main"> <div>Text 1</div> <div>Text 2</div> </div> 

Answer 1

你可以給.main類一個100vh的最小高度。

.main{
 display: flex;
 flex-direction: row;
 min-height: 100vh;
 justify-content: space-between;
 background-color: blue;
 }

演示： https ： //codepen.io/anon/pen/pYKzzM

Answer 2

您可能希望通過瀏覽器進行高度計算：包含塊和子項 。 顯然， height和min-height在CSS中不是一回事。

---

為你的body和html改變min-height到height - 見下面的演示：

 html{ height: 100%; /* changed to height */ width: 100%; } body{ height: 100%; /* changed to height */ width: 100%; background-color: green; } .main{ display: flex; flex-direction: row; min-height: 100%; justify-content: space-between; background-color: blue; } 

 <div class="main"> <div>Text 1</div> <div>Text 2</div> </div> 

你也可以給main元素賦予height: 100vh來設置flexbox的內在高度 - 見下面的演示：

 body{ margin: 0; height: 100vh; /* full viewport height */ background-color: green; } .main{ display: flex; flex-direction: row; min-height: 100%; justify-content: space-between; background-color: blue; } 

 <div class="main"> <div>Text 1</div> <div>Text 2</div> </div>