Question

我正在尝试使用基于Flexbox的布局来显示带有粘性页脚的页面。这适用于所有浏览器中的短页面（小于窗口的高度）。但是，使用长页面的相同方法适用于Firefox，但IE11将容器元素减少到子元素的大约25％。

以下是示例：https://codepen.io/vers/pen/rraKYP

html {
  height: 100%;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
div.container {
  max-width: 600px;
  background-color: #aaa;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1.5;
}
div.content {
  margin: 8px;
  flex-grow: 1;
}
div.header,
div.footer {
  background-color: black;
  color: #fff;
}

<html>

<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="content">
      <p>...</p>
      <!-- 40 long paragraphs here -->
    </div>
    <div class="footer">Footer</div>
  </div>
</body>

</html>

Answer 1

当您使用height属性时，某些浏览器会将其解释为限制。或者，使用min-height。

而不是：

html {
  height: 100%;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

请使用：

body {
  min-height: 100vh;      
  display: flex;
  flex-direction: column;
}

revised codepen

或者，这也有效：

html {
  display: flex;
  flex-direction: column;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

revised codepen

在Chrome，FF，IE11和＆amp ;;边缘。

Answer 2

IE11在带有vh单元的flexbox中存在问题。您可以将body高度更改为100％。

IE11错误地计算父Flex容器的高度

2 个答案: