Css Internet Explorer没有'；t尊重我的最小身高：使用flexbox 100%

我已经浏览了所有关于StackOverflow和web的最低高度：100%解决方案，但我似乎找不到一个适合我（相对简单）需求的解决方案

以下是我想要的：

我有一个两列容器，两列的长度应该相等

当内容未填满屏幕时，列应延伸至整个窗口高度

我很乐意使用flex box，但如果可能的话，我不想使用JS黑客

示例代码：

项目1

项目2

项目3

项目4

项目5

内容1

内容2

内容3

内容4

内容5

内容6

内容7

内容8

html，正文{高度：100%；边距：0；}
.包装纸{
身高：100%；
溢出：自动；
-webkit溢出滚动：触摸；
}
.集装箱{
显示器：flex；
对齐项目：拉伸；
最小高度：100%；
}
.导航{
背景：灰色；
宽度：200px；
}
.内容{
柔性生长：1；
背景：黄色；
}

这在Safari和Chrome中非常有效

似乎IE（在我的例子中是v11）不支持我的最小高度，因此，这些列不填充屏幕的高度。据我所知，IE6+7在将高度视为最小高度方面存在问题，但这是过去的遗物，在使用HTML5 doctype时早已过时

我如何让IE尊重我的最小身高

---

如何使此布局工作？

使用IE的

高度：100%

IE

将忽略此处的

min height

属性，但

chrome

将选择它

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

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

Codepen

---

编辑：托马斯的回答显示了一种不使用最小高度即可实现我想要的目标的方法，这意味着它在IE上运行良好

---

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

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

以下是修复方法：

HTML

---

jshiddle:

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

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

首先，使用100vh代替100%

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

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

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

来，看看我的密码笔

---

最小高度

在IE10/11中与柔性布局关联时不起作用（请检查）。使用另一个flex容器来修复它

编辑：刚刚发现我没有回答原来的帖子，被投票结果误导了。现在我们开始：

---

双栏布局 HTML

不要直接在

body

上使用flexbox布局，因为它会破坏通过jQuery插件插入的元素（自动完成、弹出等）

这里是基于您的代码的

---

粘脚 HTML

---

请参见。

让您的

display:flex

元素的子元素继承最小高度对于我来说是IE上的一个快速解决方案，无需添加任何额外元素。它在溢出时也能正常工作

HTML:

---

这并不是说IE不尊重最小高度，也不是说对于单线柔性容器，该线的高度应该是柔性容器的高度。也就是说，我不知道是否可以对此采取任何措施；这可能与我们一直致力于解决的几个flexbox问题有关。我刚刚在一个内部版本上测试了你的页面，无法重新编写IE11中的结果。抓紧-我们将在未来的版本中发布一个修复程序。提前完成。我的问题几乎肯定是的副本。我也有同样的问题，我固定设置了一个高度，而不是最小高度，我用媒体查询对它进行了更改，所以这是在正确的轨道上，我尝试了这个。不过有个问题。当您调整浏览器窗口的大小，使内容不再适合，然后向下滚动时，您可以看到内容已溢出容器。这在IE和Chrome上都会发生。也许我需要在IE上使用JS来检查容器是否比窗口短，并将其设置为高度：仅在这种情况下为100%。这并不能解决问题<代码>高度也会被其他浏览器读取，它会使

最小高度

无效。请注意，如果内容高于100%高度：100%和高度：100vh，则在本例中的效果完全相同。它们都可以正常工作，直到您的内容溢出屏幕高度。在这种情况下，我真正需要的是最小高度：100%或100vh，但IE有一个flexbox不符合最小高度的错误。你试过代码吗？我添加了一个提琴来证明这在IE中是有效的，即使内容泛滥。您需要将高度设置为100vh，而不是%。嗯，您没有回答最小高度被破坏的问题，这就是为什么我拒绝了您的回答，bu

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

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

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

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

.ie-fixMinHeight{
    display:flex;
}

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

#content {
    flex-grow:1;
}

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

.ie-fixMinHeight {
    display:flex;
}

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

#content {
    flex-grow:1;
}

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

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 */
}