IE11錯誤地計算父級柔性容器的高度

我試圖使用基於柔性框的佈局來顯示帶有粘性頁腳的頁面。這適用於所有瀏覽器中的短頁面（小於窗口高度）。然而，在Firefox中使用長頁面的方法是相同的，但IE11將容器元素剪切爲子元素的大約25％。IE11錯誤地計算父級柔性容器的高度

這裏是例如：https://codepen.io/vers/pen/rraKYP

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
div.container { 
 
    max-width: 600px; 
 
    background-color: #aaa; 
 
    flex-grow: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 20px; 
 
    line-height: 1.5; 
 
} 
 
div.content { 
 
    margin: 8px; 
 
    flex-grow: 1; 
 
} 
 
div.header, 
 
div.footer { 
 
    background-color: black; 
 
    color: #fff; 
 
}

<html> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="header">Header</div> 
 
    <div class="content"> 
 
     <p>...</p> 
 
     <!-- 40 long paragraphs here --> 
 
    </div> 
 
    <div class="footer">Footer</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-09-06 Alexey Mitev

當您使用height屬性時，某些瀏覽器會將其解釋爲限制。作爲替代，請使用min-height。

取而代之的是：

html { 
    height: 100%; 
} 
body { 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
}

只要使用此：

body { 
    min-height: 100vh;  
    display: flex; 
    flex-direction: column; 
}

revised codepen

另外，這也適用：

html { 
    display: flex; 
    flex-direction: column; 
} 

body { 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
}

revised codepen

這兩種方法都在Chrome，FF，IE11 & Edge中測試過。

來源

2016-09-06 14:54:07

IE11與VH單元Flexbox的問題。您可以將body高度更改爲100％。

來源

2016-09-06 06:26:50 blonfu

試過了：https://codepen.io/vers/pen/LRErLr，但不幸的是沒有改變。 –

適用於Windows 7上的IE11中的我 – blonfu

好奇，現在不起作用。但是刪除'body'中的高度 – blonfu

IE11錯誤地計算父級柔性容器的高度

回答

相關問題