如何解决HTML Flex 布局在 Internet Explorer 中看起来不同
我正在尝试让一个简单的 flex 布局在 IE11 中与在 Chrome 中一样工作。
代码如下:
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 );
有没有办法做到这一点? 谢谢
解决方法
这里有一个可能对您有用的想法:
body {
display: flex;
}
.wrap {
min-height: 100vh;
flex-grow: 1;
display: flex;
flex-direction: column;
max-width: 1200px;
border: 1px solid #222222;
}
.main {
flex: 1 1 auto;
display: flex;
}
header {
background: green;
flex: 0 0 25px;
}
#footer {
background: green;
flex: 0 0 25px;
}
.sidebar {
background: blue;
flex: 0 0 135px;
padding: 10px;
}
.content {
background: yellow;
padding: 10px;
flex: 1 1 auto;
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
<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>
您真的需要 display: flex
上的 .wrap
吗?因为在 https://caniuse.com/?search=calc 上,您会发现“据报道,IE 和 Edge 不支持 'flex' 内的 calc
。”
因此,如果您改用 display: block
,它可能适用于 IE。在 .wrap
的 CSS 规则中,我看到您有 flex-direction: column;
,但该规则中没有其他设置会对使用 display: block
产生实际影响。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。