Internet Explorer 不尊重我的最小高度：100% 使用 flexbox答案

【问题标题】：Internet Explorer doesn't honor my min-height: 100% with flexboxInternet Explorer 不尊重我的最小高度：100% 使用 flexbox
【发布时间】：2014-12-23 04:15:54
【问题描述】：

我一直在查看 StackOverflow 和网络上的所有 min-height: 100% 解决方案，但似乎找不到适合我（相对简单）需求的解决方案。

这就是我想要的：

我有一个两列容器，两列都应拉伸到相等的高度。
当内容未填满屏幕时，列应拉伸到整个窗口高度。
我很乐意使用 flex-box，但如果可能的话，我不希望使用 JS hack。

示例代码：

http://codepen.io/anon/pen/dwgDq?editors=110

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="nav">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
        <p>Item 5</p>
      </div>
      <div class="content">
        <p>Content 1</p>
        <p>Content 2</p>
        <p>Content 3</p>
        <p>Content 4</p>
        <p>Content 5</p>
        <p>Content 6</p>
        <p>Content 7</p>
        <p>Content 8</p>
      </div>
    </div>
  </body>
</html>

html, body { height: 100%; margin: 0; }

.wrapper {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.container {
  display: flex;
  align-items: stretch;
  min-height: 100%;
}

.nav {
  background: grey;
  width: 200px;
}

.content {
  flex-grow: 1;
  background: yellow;
}

这在 Safari 和 Chrome 中完美运行。

似乎 IE（在我的情况下为 v11）不尊重我的最小高度，因此，列不会填满屏幕的高度。根据我的阅读，IE6+7 在将高度视为最小高度方面存在问题，但这是过去的遗物，并且在使用 HTML5 文档类型时早已不复存在。

如何让 IE 尊重我的最小高度？

如何使这种布局发挥作用？

【问题讨论】：

这并不是说 IE 不遵守最小高度，它不遵守对于单行 flex 容器的要求，该行的高度应该是 flex 容器的高度。也就是说，我不知道是否可以做任何事情。
这里是 IE 团队的项目经理；这可能与我们一直在努力解决的几个 flexbox 问题有关。我刚刚在内部构建中测试了您的页面，无法重现在 IE11 中看到的结果。坚持住 - 我们将在未来的版本中发布修复程序。通过downloading Windows 10 领先一步。
我的问题几乎肯定是stackoverflow.com/questions/19371626/…的重复。
我遇到了同样的问题，我修复了设置高度而不是最小高度，并使用媒体查询进行更改

标签： css html internet-explorer height

【解决方案1】：

让display: flex 元素的子元素继承最小高度对我来说是 IE 上的快速解决方案，无需添加任何额外元素。它也可以按预期使用溢出。

HTML：

<div class="container">
  <div class="col-1">Col 1</div>
  <div class="col-2">Col 2</div>
</div>

CSS：

body {
  margin: 0;
  min-height: 100vh;
}

.container {
  min-height: inherit; /* or 100vh or whatever you want */
  display: flex;
}
.container > * {
  min-height: inherit; /* use the full height of the container, works with overflow */
}

.col-1 {
  background: red;
  flex-grow: 1; /* half the screen width */
}
.col-2 {
  background: blue;
  flex-grow: 1; /* half the screen width */
}

【讨论】：

【解决方案2】：

min-height 在与 flex 布局相关联时无法在 IE10/11 中工作（检查bug report）。使用另一个弹性容器来修复它。

编辑： 刚刚发现我没有回答原始帖子，被赞成的答案误导了。所以我们开始：

两列布局

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="sidebar"></div>
        <div id="content"></div>
    </div>
</div>

CSS

.ie-fixMinHeight{
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
}

#content {
    flex-grow:1;
}

不要直接在 body 上使用 flexbox 布局，因为它会破坏通过 jQuery 插件（自动完成、弹出窗口等）插入的元素。

这里是 fixed layout 基于您的代码。

粘性页脚

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

查看working demo。

【讨论】：

【解决方案3】：

这个问题还有另一种解决方案。

在您的情况下，您可以使用伪元素来拉伸行：

首先使用 100vh 而不是 100%

.container {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

之后，只需将 伪元素 添加到具有完全相同 相同高度 值的 .container

.container::after{
  content: '';
  height: 100vh;
  visibility: hidden;
}

在这里，看看我的代码笔 http://codepen.io/anon/pen/LVazgQ

【讨论】：

float: left 是必需的。不需要overflow 和visibility。

【解决方案4】：

编辑：Thomas 的回答展示了一种无需使用 min-height 即可实现我想要的方法，这意味着它在 IE 上运行良好。

我最终用 Javascript 解决了这个问题，尽管我承认这绝对是令人讨厌的代码和一个非常依赖于实现的解决方案。每当我的主要内容元素的大小发生变化时，我都会关闭 height 属性，测量容器以确定是否确实需要 height 属性，然后在需要时替换它。就好像我编写了自己的最小高度实现。这种方法的一个主要缺点是，当元素改变大小或元素内的内容发生变化时，IE 不会给出适当的事件，如果没有这些事件，您需要使用 setInterval 计时器并自己测量元素。毛。

除了我自己的解决方案之外，我还与 IE 团队中从事 flexbox 工作的人员进行了交谈。他们承认该错误今天仍然存在于生产中，但仍然敦促我找到一种无需 JS 的方法来修复它。他们给我的一条线索是使用 IE 特定的-ms-grid layout。我不熟悉这些，但如果我有时间调查，我会报告并更新此答案。

【讨论】：

【解决方案5】：

这里是修复：

HTML

<body>
  <header>Header</header>
  <main>Here comes the content ...</main>
  <footer>Footer</footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header, footer {
  flex-shrink: 0;
}
main {
  flex: 1 0 auto;
}

jsfiddle：http://jsfiddle.net/d5syw3dc/

【讨论】：

height: 100% 和 height: 100vh 在这种情况下的工作方式完全相同。它们都可以正常工作，直到您的内容溢出屏幕高度。在这种情况下，我真正需要的是 min-height: 100% 或 100vh，但 IE 有一个错误，即 flexbox 不尊重 min-height。
你试过代码了吗？我添加了一个小提琴来证明这在 IE 中有效，即使内容溢出。您需要将高度设置为 100vh，而不是 %。
好吧，你没有回答 min-height 被破坏的问题，这就是我驳回你的答案的原因，但在再拍一次之后，我意识到你找到了一种解决方法取决于最小高度。极好的！这是使用您的修复程序的我的 codepen 版本：codepen.io/anon/pen/EaEejw?editors=110

【解决方案6】：

在 IE 中使用 height: 100%

IE 将忽略此处的 min-height 属性，但 chrome 会选择它。

我不确定原因，但我希望它能正常工作。

.container {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height:100%;
}

Codepen

http://codepen.io/anon/pen/KDJjC

【讨论】：

对，所以这是在正确的轨道上，我尝试了这个。不过有问题。当您调整浏览器窗口的大小以使内容不再适合，然后向下滚动时，您会看到内容已溢出容器。这在 IE 和 Chrome 上都会发生。
也许我需要在 IE 上使用 JS 来检查容器是否比窗口短并将其设置为 height: 100% 仅在这种情况下。
这并不能解决问题。 height 也被其他浏览器读取，它使 min-height 无用。看到your demo overflows如果内容高于100%