使用 flex: 1 展开 div 将折叠 IE11 中的所有内容答案

【问题标题】：Using flex: 1 to expand the div will collapse everything in IE11使用 flex: 1 展开 div 将折叠 IE11 中的所有内容
【发布时间】：2016-05-13 21:18:06
【问题描述】：

我使用本指南使页脚固定在底部：http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

本指南使用弹性框来完成这项工作。它在 Chrome 和 Firefox 甚至 Edge 上都能完美运行。但是在 IE11 上，所有元素都像这张图片一样相互折叠：

代码演示：

body {
  min-height: 100%;
  position: relative;
}
.container {
  display: flex;
  min-height: 100vh;
  height: 100%;
  flex-direction: column;
}
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: green;
}
.Site-content {
  flex: 1;
  background-color: red;
}
footer {
  background-color: blue;
  height: 50px;
}

<body class="Site">
  <div id="react-root">
    <div class="container">
      <main class="Site-content">Site</main>
      <footer>Footer</footer>
    </div>
  </div>
</body>

知道如何解决这个问题吗？在此先感谢:-)

【问题讨论】：

IE11 as per caniuse.com/#search=flex 仍然部分支持 flexbox，因此这可能是问题的原因，但由于您的布局很简单，您应该尝试不使用 flexbox..
@DhavalChheda 实际上我想将页脚粘贴到底部。我使用了其他技术，包括将页脚设置为底部。但他们都有问题。一种方法将页脚保持在底部，但是当内容溢出时，页脚会在它们之上。最大的问题是因为我在真实站点中使用 React，所以内容和页脚不会是 body 的直接子级。

标签： html css flexbox

【解决方案1】：

只需使用以下使其适用于 IE11：

html, body{
    height:100%;
}

完整代码：

html, body{
    height:100%;
}

.Site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: green;
}
.Site-content {
  flex: 1;
  background-color: red;
}
footer {
  background-color: blue;
  height: 50px;
}

<body class="Site">
  <main class="Site-content">Site</main>
  <footer>Footer</footer>
</body>

Working Fiddle link

【讨论】：

对不起。我刚刚在示例中尝试过它并且它有效。但在网站上却没有。然后我意识到在站点中，页脚和内容位于另外两个 div 中，因为我正在使用 react。如果我将它们移动为身体标签的直接子代，它将起作用。但是做不到。抱歉，我刚刚用我在真实站点中的代码更新了代码。
@THpubs 将height:100% 给.container。
它有效，但如果内容超出页脚，内容将重叠。我刚刚更新了代码...尝试调整浏览器窗口的大小并使其变小并让内容与页脚重叠。

【解决方案2】：

<style>
        .Site {
            height: 100vh;
            background-color: green;
        }

        main {
            height: calc(100% - 50px);
            background-color: red;
        }

        footer {
            background-color: blue;
            height: 50px;
        }

    </style>

【讨论】：

【解决方案3】：

这是因为 IE 的已知错误。你不能同时使用 min-height 和 flexbox。请参考https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

尝试更新您的 IE 或高度而不是最小高度，也尽量避免使用 vh。我认为这对你有用。

body {
  min-height: 100%;
  position: relative;
}
.container {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.Site {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: green;
}
.Site-content {
  flex: 1;
  background-color: red;
}
footer {
  background-color: blue;
  height: 50px;
}

【讨论】：

谢谢，但如果内容超出页脚，内容将重叠。我刚刚更新了代码...尝试重新调整浏览器窗口的大小并使其变小并让内容与页脚重叠。