IE11 错误计算父 flex 容器的高度
Posted
技术标签:
【中文标题】IE11 错误计算父 flex 容器的高度【英文标题】：IE11 calculates the height of parent flex container incorrectly 【发布时间】：2017-01-13 10:41:34 【问题描述】：我正在尝试使用基于 flexbox 的布局来显示带有粘性页脚的页面。这适用于所有浏览器中的短页面（小于窗口高度）。但是，长页面的相同方法适用于 Firefox，但 IE11 将容器元素减少到子元素的 25% 左右。
示例如下：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>【问题讨论】：
【参考方案1】：IE11 在带有 vh 单位的 flexbox 中存在问题。您可以将body 的高度更改为 100%。
【讨论】：
在 Windows 7 上的 IE11 中为我工作 很好奇，现在不行了。但可以删除body中的高度【参考方案2】：
当您使用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 中进行了测试。
【讨论】：
以上是关于IE11 错误计算父 flex 容器的高度的主要内容，如果未能解决你的问题，请参考以下文章
css flexbox IE11 flex 项目内容脱离容器