Flexbox和vh高度单位在IE11中是否不兼容？
Flexbox和vh高度单位在IE11中是否不兼容？
提问于 2014-08-07 16:35:05
我正在尝试使用基于flexbox的布局来为我的页面添加粘性页脚。这在Chrome和火狐浏览器中效果很好，但在IE11中，页脚就在我的主要内容之后。换句话说，主要内容不会被拉伸以填满所有可用空间。
body {
border: red 1px solid;
min-height: 100vh;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header, footer {
background: #dd55dd;
}
main {
background: #87ccfc;
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}<body>
<header role="banner"><h1> .. </h1></header>
<main role="main">
<p>.....</p>
</main>
<footer>...</footer>
</body>
当在IE中使用vh测量容器高度单位时，如何让主要元素在flex布局中拉伸？我想看看这个行为是不是IE实现flexbox规范的方式中的一个bug的结果，但是我在其他地方找不到任何关于这个问题的提及。
回答 3
Stack Overflow用户
发布于 2014-08-27 17:17:45
我昨天遇到了同样的bug，我自己也解决不了。不幸的是，现在似乎对此无能为力，因为它是IE错误，几乎一年前就报告给了微软开发人员，这里：
Stack Overflow用户
发布于 2018-05-08 03:03:57
我发现让粘性页脚在IE11中工作的诀窍是确保flex-basis是100%，甚至是100vh。请参见下面的示例或可以在IE11中测试的live Codepen example。
html {
display: flex;
flex-direction: column;
}
body {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 100%;
min-height: 100vh;
}
header {
padding: 32px;
background-color: seagreen;
}
main {
flex-grow: 1;
padding: 32px;
background-color: rgba(0, 0, 0, 0.05);
}
footer {
padding: 32px;
background-color: coral;
}<header>
Header
</header>
<main>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
</main>
<footer>
Footer
</footer>
Stack Overflow用户
发布于 2015-07-20 17:45:00
通常，这会有所帮助：
html, body {
height: 100%;
}。。而且你不需要使用vh单元。
完整示例：
* {
margin: 0;
}
html,
body {
height: 100%;
}
body {
border: red 1px solid;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header,
footer {
background: #dd55dd;
}
main {
background: #87ccfc;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}<header>
<h1>Herons - How they plan to eat your eyes!</h1>
</header>
<main>
Herons are foul and devious birds.
</main>
<footer>
<small>© 2014 Institute for the prevention of Herons</small>
</footer>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25177791
复制相关文章
相似问题