Internet Explorer不支持使用flexbox属性时min-height: 100%的设置。

Question

Internet Explorer不支持使用flexbox属性时min-height: 100%的设置。

csshtmlinternet-explorerheight

18

我已经在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）并不遵守我的 min-height，因此，列并没有填满屏幕的高度。从我所阅读的内容来看，IE6+7 在处理 height 作为 min-height 方面存在问题，但是当使用 HTML5 doctype 时，这已经是过去的事情了。

我该如何让 IE 遵守我的 min-height？

我该如何使这个布局生效？

- Brent Traut

1

并不是IE没有遵守min-height的规定，而是没有遵守单行flex容器的高度应该与flex容器本身高度相同的要求。话虽如此，我不知道是否有任何解决办法。 - Alohci

2

IE团队的项目经理在此；这可能与我们一直在努力解决的一些flexbox问题有关。我刚刚在内部版本上测试了您的页面，无法重现在IE11中看到的结果。请耐心等待 - 我们将在未来的发布中提供修复。通过下载Windows 10，赶超其他人。 - Sampson

我的问题很可能是 https://dev59.com/HmIk5IYBdhLWcg3wU82o 的重复。 - Brent Traut

我遇到了相同的问题，我通过设置一个高度而不是最小高度来解决它，并使用媒体查询进行更改。 - Iran Reyes

6个回答

5

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

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

首先，请使用100vh而不是100％

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

然后只需将伪元素添加到具有完全相同高度值的.container中即可。

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

请查看我的codepen代码 http://codepen.io/anon/pen/LVazgQ

- Xopoc

1

需要使用 float: left。不需要使用 overflow 和 visibility。 - Glenn Jorde

1

拥有您的display: flex元素的子代继承min-height对于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 */
}

- dudasaus

1

当与弹性布局相关联时，min-height在IE10/11中无法正常工作（请查看错误报告）。使用另一个弹性容器来解决它。 编辑：刚刚发现我没有回答原始帖子，被得到赞同的答案误导了。所以我们开始吧：

双列布局

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插件（自动完成、弹出窗口等）插入的元素。

这里是基于您的代码的固定布局。

粘性页脚

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;
}

查看一个工作演示。

- BeliG

0

编辑：Thomas的回答展示了一种实现我想要的效果而不使用min-height的方法，这意味着它在IE上可以正常工作。

我最终用JavaScript解决了这个问题，尽管我承认它是非常恶心的代码和一个相当依赖实现的解决方案。每当我的主要内容元素大小改变时，我关闭高度属性，测量容器以确定是否实际需要高度属性，然后在需要时替换它。就像我编写了自己的min-height实现一样。这种方法的一个主要缺点是IE不会在元素大小或元素内部内容更改时提供适当的事件，而没有这些事件，您需要使用setInterval计时器并自己测量元素。很糟糕。

除了我的解决方案之外，我还与负责flexbox的IE团队成员交谈过。他们承认该错误今天仍存在于生产中，但仍敦促我找到一种无需JS修复它的方法。他们给我的一个线索是使用IE特定的-ms-grid layout。我对此不熟悉，但如果我有时间调查，我将回报并更新此答案。

- Brent Traut

-2

在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

- Manjunath Siddappa

没错，这是正确的方向，我尝试了一下。但是有一个问题。当你调整浏览器窗口大小以至于内容不再适合时，然后你向下滚动，你会发现内容已经溢出了容器。这在IE和Chrome上都会发生。 - Brent Traut

也许我需要在IE上使用JS来检查容器是否比窗口短，并仅在这种情况下将其设置为高度：100％。 - Brent Traut

这不是解决方法。其他浏览器还会读取 height，这会使得 min-height 失效。请看演示，如果内容高度超过100%，则会溢出。 - fregante

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thomas · Accepted Answer

21

以下是修复方法：

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/

- Thomas

9

在这种情况下，height: 100% 和 height: 100vh 的作用是完全相同的。它们在你的内容超出屏幕高度之前都能很好地工作。在这种情况下我真正需要的是 min-height: 100% 或 100vh，但 IE 存在一个 flexbox 不支持 min-height 的 bug。 - Brent Traut

你尝试过这个代码吗？我添加了一个fiddle以证明在IE中即使存在溢出内容，也可以正常工作。你需要将高度设置为100vh，而不是百分比。 - Thomas

好的，你没有回答min-height被破坏的问题，这就是我拒绝你的答案的原因，但在再次尝试后，我意识到你已经找到了一个不依赖于min-height的解决方法。太棒了！这是使用你的修复版本的我的codepen链接：http://codepen.io/anon/pen/EaEejw?editors=110 - Brent Traut