我正在尝试让一个简单的 flex 布局在 IE11 中与在 Chrome 中一样工作。
在 Chrome 中，它看起来像这样：
但是在 IE11 中它看起来像这样：
代码如下：
html,body {
margin: 2px 0 0 0;
padding: 0;
}
.wrap {
display: flex;
min-height: calc( 100vh - 8px);
flex-direction: column;
max-width: 1200px;
margin: auto;
border: 1px solid #222222;
}
.main {
flex: 1 1 auto;
display: flex;
}
header {
background: green;
padding: 10px;
}
#footer {
background: green;
padding: 10px;
}
.sidebar {
background: blue;
flex: 0 0 135px;
padding: 10px;
}
.content {
background: yellow;
padding: 10px;
flex: 1 1 auto;
}
@media screen and (max-width:680px) {
.sidebar {
flex: 0;
order: 2
}
.main {
flex-direction: column;
}
}<body translate="no">
<div class="wrap">
<header>
<div class="header-inner-left">
</div>
<div class="header-inner">
</div>
</header>
<main class="main">
<div class="sidebar">
</div>
<div class="content">
</div>
</main>
<div id="footer">
<div class='footerleft'>
</div>
<div class='footerright'>
</div>
<div style="clear: both;"></div>
</div>
</div>
</body>这显示了 HTML 和 CSS。 有没有办法让这个看起来一样。
如果我设置 .wrap 所以它使用：
height: calc( 100vh - 8px );
然后加载页面看起来是正确的，但我需要能够让内容正确地超出 .wrap，所以设置 min-height: calc( 100vh - 8px );
有没有办法做到这一点？ 谢谢