Internet Explorer不支持我的最小高度:使用flexbox 100%

Question

Internet Explorer不支持我的最小高度:使用flexbox 100%

Bre*_*aut 18 html css height html5 internet-explorer

我一直在浏览所有最小高度:StackOverflow和网络上的100%解决方案,我似乎找不到适合我(相对简单)需求的解决方案.

这就是我想要的:

我有一个两列容器,两列都应拉伸到相同的高度.
当内容未填满屏幕时,列应拉伸到整个窗口高度.
我很高兴使用flex-box,但如果可能的话,我宁愿不使用JS hacks.

示例代码:

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

Run Code Online (Sandbox Code Playgroud)

这在Safari和Chrome中完美运行.

看起来好像IE(在我的情况下为v11)不符合我的最小高度,因此,列不会填满屏幕的高度.从我读到的内容来看,IE6 + 7存在将高度视为最小高度的问题,但这是过去的遗留物,在使用HTML5文档类型时已经很久了.

如何让IE荣誉达到我的最小高度？

如何使此布局有效？

Answer 1

Tho*_*mas 19

这是修复:

HTML

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

Run Code Online (Sandbox Code Playgroud)

CSS

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

Run Code Online (Sandbox Code Playgroud)

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

高度:100%和高度:100vh在这种情况下完全相同.它们都可以正常工作,直到您的内容溢出屏幕高度.在这种情况下我真正需要的是最小高度:100%或100vh,但IE有一个flexbox错误,不符合最小高度. (7认同)

Answer 2

小智 5

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

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

首先使用100vh而不是100%

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

Run Code Online (Sandbox Code Playgroud)

之后,只需将伪元素添加到.container,其高度值完全相同

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

Run Code Online (Sandbox Code Playgroud)

在这里,请参阅我的codepen http://codepen.io/anon/pen/LVazgQ

归档时间：	10 年，10 月前
查看次数：	14288 次
最近记录：	8 年，2 月前