Question

我尝试使用flexbox进行简单的设计，但我遇到了IE11的问题。基本上，我想要一个仅在内容不够高时才能粘在底部的页脚。我这样做对Chrome没有任何问题：

＆＃13;

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

＆＃13;

<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

＆＃13;

只需使用<p>main</p>的数量来查看IE11的错误行为。

有没有办法在没有JavaScript的情况下实现这一目标？

Answer 1

IE有一个min-height错误，并且在flex列容器parent上需要display: flex，在本例中为html

Fiddle demo

像这样更新你的CSS

*,
*:after,
*:before {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  display: flex;
}
body {
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}

<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

Answer 2

在main上，而不是flex: 1使用flex: auto。这应该是你所需要的一切。

flex: 1速记规则细分为：

flex-grow: 1
flex-shrink: 1
flex-basis: 0

flex: auto速记规则细分为：

flex-grow: 1
flex-shrink: 1
flex-basis: auto

IE无法解析flex-basis: 0。

更多信息：

flex property not working in IE

Answer 3

意识到这是一个旧线程，但是遇到了一个真正对我有帮助的解决方案，（可能不适用于所有情况）以像素为单位添加任意固定的高度-最小高度会覆盖固定高度，因此没有裁剪的内容。这是一个CSS示例：

.fullheight {
min-height: 100vh;
height: 200px; /*IE 11 flexbox min-height fix*/
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
align-content: center;

}

Answer 4

因为这可能是理想的解决方案：如果您不一定要扩大main标签，但仍将页脚底部对齐：

html, body {
  margin: 0;
  display: flex;
}
html {
  height: 100%;
}
body {
  flex-flow: column nowrap;
  flex-grow: 1;
}
footer {
  margin-top: auto;
}

<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

Answer 5

这个答案（@ceindeg answer）对我来说部分起作用，但是缩小了父容器的大小，并且我有一个背景想放在底部。

因此，我只浏览了position: absolute的IE的页脚仅。

您只能对IE使用媒体查询，因此其他浏览器可以正常工作（在这里查看：How to target only IE (any version) within a stylesheet?）。

就我而言，我想针对IE10和IE11，因此我使用了此方法：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  footer {
   position: absolute;
   bottom: 0;
  }


  .parent-container {
    position: relative
    // Add some padding-bottom to the parent container so it won't be glued together
    padding-bottom: 30px;
  }
}

Flexbox，最小高度和IE11

5 个答案: