Question

如何让我的块元素在IE11 EDGE中包含它的孩子？

在小提琴中，当<footer>位于<login-page>下方时，您可以看到<login>位于<login-page>下方。（因为<login>未封装ptr）。

在Chrome中运行良好，而不是IE11。

https://jsfiddle.net/10ohr6wy/1/

很想得到一些关于此感谢的建议。理想情况下，优先选择非突兀的修复，以及传统约束。

Answer 1

我相信您实际上正在处理flex + min-height错误。

另一种方法是将父级设置为flex column元素：

这里

body {
display:flex;
flex-flow:column;
}

工作正常。 https://jsfiddle.net/10ohr6wy/3/

body {
  display: flex;
  flex-flow: column;
}
app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.xui-page-body {
  padding-bottom: 40px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
login-page {
  flex: 1;
  padding: 10px;
  margin-bottom: -40px;
  display: block;
  background: green;
}
login {
  display: block;
  height: 200px;
  background: red;
}
footer {
  height: 50px;
  display: block;
  background: black;
}

<app>
  <div class="xui-page-body">
    <login-page>
      <login></login>
    </login-page>
  </div>
  <footer></footer>
</app>

如果您未将flex-direction设置为column，则app必须是唯一的孩子。

可以通过以下方式调整大小：

flex:1;如果您想加入margin s

body {
  display: flex;
}
app {
  flex:1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.xui-page-body {
  padding-bottom: 40px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
login-page {
  flex: 1;
  padding: 10px;
  margin-bottom: -40px;
  display: block;
  background: green;
}
login {
  display: block;
  height: 200px;
  background: red;
}
footer {
  height: 50px;
  display: block;
  background: black;
}

<app>
  <div class="xui-page-body">
    <login-page>
      <login></login>
    </login-page>
  </div>
  <footer></footer>
</app>

或

width:100%;和box-sizing:border-box包含border和padding（如果有）。

body {
  display: flex;
}
app {
  width:100%;
  box-sizing:border-box;
  padding: 3em;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.xui-page-body {
  padding-bottom: 40px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
login-page {
  flex: 1;
  padding: 10px;
  margin-bottom: -40px;
  display: block;
  background: green;
}
login {
  display: block;
  height: 200px;
  background: red;
}
footer {
  height: 50px;
  display: block;
  background: black;
}

<app>
  <div class="xui-page-body">
    <login-page>
      <login></login>
    </login-page>
  </div>
  <footer></footer>
</app>

Answer 2

使body元素成为弹性容器。

给app全宽。

revised fiddle

body {
  display: flex; /* new */
}

app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%; /* new */
}
.xui-page-body {
    padding-bottom: 40px;
    display: flex;
    flex: 1;
    flex-direction: column;
}
login-page {
  flex: 1;
  padding: 10px;
  margin-bottom: -40px;
  display: block;
  background:green;
}
login {
  display: block;
  height: 200px;
  background: red;
}
footer {
  height: 50px;
  display: block;
  background:black;
}

<app>
  <div class="xui-page-body">
    <login-page>
      <login></login>
    </login-page>
  </div>
  <footer></footer>
</app>

另见：flex container min-height ignored in IE

无法显示：块元素（而不是display：flex元素）在IE11中包含它的子元素

2 个答案: