Question

我一直在浏览所有最小高度：StackOverflow和网络上的100％解决方案，我似乎无法找到符合我（相对简单）需求的解决方案。

这就是我想要的：

我有一个两列容器，两列都应拉伸到相同的高度。
当内容没有填满屏幕时，列应拉伸至整个窗口高度。
我很高兴使用flex-box，但如果可能的话，我不想使用JS黑客。

示例代码：

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尊重我的最小高度？

如何使此布局有效？

Answer 1

以下是修复：

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/

Answer 2

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

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

首先使用 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

Answer 3

当它与flex布局相关联时，

min-height在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。

Answer 4

让你的display: flex元素的子元素继承min-height对我来说是一个快速的解决方案，而不添加任何额外的元素。它也可以按预期的方式使用溢出。

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

Answer 5

编辑：托马斯的答案显示了一种在不使用min-height的情况下实现我想要的方法，这意味着它在IE上运行良好。

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

除了我自己的解决方案之外，我还与IE团队中处理flexbox的人们进行了交谈。他们承认这个bug今天仍然存在于生产中，但仍然敦促我找到一种方法来修复它而不需要JS。他们给我的一个主要是使用IE特定的-ms-grid layout。我对这些不熟悉，但如果我有时间调查，我会报告并更新这个答案。

Answer 6

IE的USE height: 100%

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

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

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

<强> Codepen

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

Internet Explorer并不尊重我的最小高度：使用flexbox 100％

6 个答案:

两列布局

粘性页脚