我很难让Chrome和IE11以相同的方式显示Flex设置。为了使页脚按IE中的预期方式运行,我需要使用 flex-basis:auto ,这反过来会破坏中的 justify-content:center 规则。 类。 Firefox可以按照预期的任何一种方式工作。
为什么在Chrome中 flex-basis:auto 的行为与Firefox和IE有所不同,如这支笔所示:https://codepen.io/ninja59/pen/GzpOjO
在Chrome中,通过删除 .content 类中的 auto 可获得所需的结果,但这导致页脚在IE中呈现时始终精确地处于100vh。对于长页面,当页面溢出时, .content div中的内容将与页脚重叠。
因此,总结:
仅 IE要求使用flex-basis:自动使页脚按预期工作,并且
仅在Chrome浏览器中,自动设置中断了证明内容:居中;
html,
body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: inherit;
overflow: auto;
}
.content {
flex: 1 0 auto;
}
.contentwrapper {
height: 100%;
text-align: center;
}
.middle {
height: inherit;
display: flex;
align-items: center;
justify-content: center;
}
.inner {
width: 320px;
background-color: red;
line-height: 100px;
}
footer {
padding: 1rem;
background-color: gray;
text-align: center;
flex-shrink: 0;
}
<div class="container">
<div class="content">
<div class="contentwrapper">
<div class="middle">
<div class="inner">
box
</div>
</div>
</div>
<footer>
footer
</footer>
</div>
</div>
答案 0 :(得分:0)
我认为该Codepen将为您提供帮助。
您必须更改某些班级。
html,
body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
}
.content {
display: flex;
flex-direction: column;
height: 100%;
}
.contentwrapper {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
}
.middle {
height: inherit;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.inner {
width: 320px;
background-color: red;
line-height: 100px;
}
footer {
padding: 1rem;
background-color: gray;
text-align: center;
flex-shrink: 0;
}