我一直在 StackOverflow 和网络上查找所有 min-height: 100% 解决方案，但我似乎找不到适合我（相对简单）需求的解决方案。
这就是我想要的：
- 我有一个两列容器，两列应该拉伸到相同的高度。
- 当内容没有填满屏幕时，列应拉伸到整个窗口的高度。
- 我很高兴使用 flex-box，但如果可能的话，我不想使用 JS hacks。
示例代码：
http://codepen.io/anon/pen/dwgDq?editors=110 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 尊重我的最小高度？
我该如何使这个布局发挥作用？
这是修复方法：
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/ http://jsfiddle.net/d5syw3dc/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
