CSS高度100％使元素高度超過100％

下面的HTML很簡單，可以做我想做的事情。綠色的身體向下伸展以填滿窗戶。CSS高度100％使元素高度超過100％

<body style="margin:0"> 
    <div style="height:100%;display:flex;flex-direction:column"> 
     <div style="background:#d0d0ff"> 
      This is a header 
     </div> 
     <div style="background:#d0ffd0;flex-grow:1"> 
      This is the body. 
     </div> 
    </div> 
</body>

但是，如果我替換正文一些柔性列，我給他們height:100%，因爲我希望他們可拉伸至底部，newdiv居然得到了高度的它大於100％的容器中，使一切滾動。爲什麼100％不是100％在這裏？

<body style="margin:0"> 
    <div style="height:100%;display:flex;flex-direction:column"> 
     <div style="background:#d0d0ff"> 
      This is a header 
     </div> 
     <div style="background:#d0ffd0;flex-grow:1"> 
      <!-- The new part --> 
      <div id='newdiv' style="display:flex;flex-direction:row; height:100%"> 
       <div style="background:#ffd0d0"> Col 1 </div> 
       <div> Col 2 </div> 
      </div> 
     </div> 
    </div> 
</body>

來源

2016-02-07 Rob N

你能提供一個小提琴，感謝您的 –

產生的代碼比你的截圖不同的輸出對我來說：https://jsfiddle.net/ok20071g/1/ –

Ug ...很抱歉...我忘記了<！doctype html>，並且處於怪癖模式。 Nevermind ... –

你得到的垂直滾動條的原因是因爲你告訴的col1和col2股利父是height: 100%。這本身就賦予它視口的整個高度。

從代碼：

<div id='newdiv' style="display:flex; flex-direction:row; height:100%"> 
    <div style="background:#ffd0d0"> Col 1 </div> 
    <div> Col 2 </div> 
</div>

除了這div有一個兄弟：頭DIV，這也佔用了空間。

因此，當瀏覽器做它的高度計算，這裏是結果：

100% + (computed height of header div) > viewport height = vertical scrollbar

而不是使用定義的高度，考慮讓Flexbox，就做好了。默認情況下，Flex項目沿着橫軸擴展容器的全長。

因此，通過簡單地聲明display: flex，子元素將展開以填充所有可用空間（沒有垂直滾動）。但由於height規則將覆蓋此Flex設置，因此我們需要從任何彈性項目中刪除height: 100%。

html, body { height: 100%; }

<body style="margin:0"> 
 
    <div style="height:100%;display:flex;flex-direction:column"> 
 
     <div style="background:#d0d0ff"> 
 
      This is a header 
 
     </div> 
 
     <div style="background:#d0ffd0;flex-grow:1; display: flex;"><!--adjustment here--> 
 
      <div id='newdiv' style="display:flex;"><!--adjustment here--> 
 
       <div style="background:#ffd0d0; display: flex;"> Col 1 </div> 
 
       <div> Col 2 </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

有兩種調整到原來的代碼。

添加display: flex
去除height: 100%

Fiddle Demo

來源

2016-02-07 14:07:56

你的代碼有效，但我的問題真的是*爲什麼*，所以讓我明白：你說的高度：100％使它100％的視口。這是有道理的，但我認爲高度：100％意味着100％的父塊元素？ http://www.w3schools.com/cssref/pr_dim_height.asp –

百分比高度基於父母的身高而工作。你是對的。除了父母也是一個百分比高度，它必須看它的父母。這個循環一直持續到它到達根元素（'html {height：100％;}'）。這是視口高度。所以除非你給父母設置了'height：250px'，否則所有的百分比高度都會從樹上向上看，作爲指導。 –

好的，但這不是我的示例代碼所做的。 'newdiv'的父母沒有'高度'風格。 –

我會做這樣的。 demo

<body> 
    <header>Header</header> 
    <div class="body"> 
    <aside>abc</aside> 
    <div class='inner'>content here</div> 
    </div> 
</body>

在你的CSS

html,body{ 
    height: 100%; 
} 

body{ 
    display: flex; 
    flex-direction: column; 

} 


.body{ 
    flex-grow:1; 
    display: flex; 
    align-items: stretch; 

} 

.inner{ 
    flex-grow: 1; 
}

，這給你一個更好的HTML結構和可維護性

來源

2016-02-07 04:34:31

這個是什麼？ - http://codepen.io/arianalynn/pen/WragJP?editors=1010

<style> 
body, html {margin:0;height:100%;width:100%;padding:0} 
</style> 
<body> 
    <div style="height:100%;display:flex;flex-direction:column"> 
    <div style="background:#d0d0ff"> 
     This is a header 
    </div> 
    <div style="background:#d0ffd0;flex-grow:1;display:flex;flex-direction:row; height:100%;-webkit-align-items:stretch"> 
     <div style="background:#ffd0d0"> Col 1 </div> 
     <div style="background:red"> Col 2 </div> 
    </div> 
    </div> 
</body>

來源

2016-02-07 04:40:31

我已經更新了你的代碼嘗試，如果這可以幫助你。將高度設置爲 100vhhttps://jsfiddle.net/ok20071g/1/

來源

2016-02-07 07:43:54 gudboisgn

CSS高度100％使元素高度超過100％

回答

相關問題