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; 
}

を

どちらの方法もChrome、FF、IE11 &エッジでテストされました。

出典

2016-09-06 14:54:07

IE11はVHユニットとフレキシボックスに問題があります。 bodyの高さを100％に変更できます。

出典

2016-09-06 06:26:50 blonfu

試したこと：https://codepen.io/vers/pen/LRErLrしかし、残念ながら何も変わっていません。 –

Windows 7 IE11の私のために働く – blonfu

好奇心、今は動作しません。 'body'の高さを削除しています – blonfu

IE11で親フレックスコンテナの高さが正しく計算されない

答えて

関連する問題