Internet Explorer不尊重我的最小高度：100％与flexbox [英] Internet Explorer doesn't honor my min-height: 100% with flexbox
问题描述
我一直在寻找所有的最小高度：100％的解决方案StackOverflow和网络，我似乎找不到一个适合我（相对简单）的需求。
这里是我想要的：
- 我有一个两列容器，两个列应该伸展到相等的高度。
- 当内容未填满屏幕时，列应该展开到整个窗口高度。
- I have a two column container, and both columns should stretch to be equal height.
- When the content doesn't fill the screen, the columns should stretch to the full window height.
- I'm happy to use flex-box, but I'd prefer not to use JS hacks if possible.
示例代码：
$ b $ b
http://codepen.io/anon/pen/dwgDq?editors=110
<！DOCTYPE html>
< html>
< body>
< div class =container>
< div class =nav>
< p>项目1< / p>
< p>第2项< / p>
< p>第3项< / p>
< p>第4项< / p>
< p>第5项< / p>
< / div>
< div class =content>
< p>内容1< / p>
< p>内容2< / p>
< p>内容3< / p>
< p>内容4< / p>
< p>内容5< / p>
< p>内容6< / p>
< p>内容7< / p>
< p>内容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：gray;
width：200px;
}
.content {
flex-grow：1;
background：yellow;
}
在Safari和Chrome中完美运行。
看起来好像IE（我的例子中的v11）不符合我的最小高度，因此，列不填满屏幕的高度。从我读到的，IE6 + 7有处理高度为最小高度的问题，但这是一个过去的遗迹，使用HTML5 doctype时已经过去了。
如何让这个布局工作？
这是修正：
HTML
< body>
< header>标题< / header>
< main>这里是内容...< / 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/
I've been looking through all the min-height: 100% solutions on StackOverflow and the web and I can't seem to find one that fits my (relatively simple) needs.
Here's what I want:
Example Code:
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;
}
This works perfectly in Safari and Chrome.
It appears as if IE (v11 in my case) doesn't honor my min-height and thus, the columns don't fill the height of the screen. From what I read, IE6+7 had issues with treating height as min-height, but this is a relic of the past and long gone when using an HTML5 doctype.
How do I make IE honor my min-height?
How do I make this layout work?
Here is the fix:
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/
这篇关于Internet Explorer不尊重我的最小高度：100％与flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
