Internet Explorer不尊重我的最低身高:使用Flexbox时达到100％ [英] Internet Explorer doesn't honor my min-height: 100% with flexbox
问题描述
我一直在研究所有最小高度:StackOverflow和网络上的100％解决方案，但似乎找不到适合我(相对简单)需求的解决方案.
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.
这就是我想要的:
- 我有一个两列的容器，两列应拉伸到相等的高度.
- 当内容没有填满屏幕时，列应延伸到整个窗口的高度.
- 我很高兴使用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;
}
这在Safari和Chrome中完美运行.
This works perfectly in Safari and Chrome.
似乎IE(在我的情况下为v11)不符合我的最小高度，因此，这些列未填充屏幕的高度.根据我的阅读，IE6 + 7在将高度视为最小高度时存在问题，但这是过去的遗物，在使用HTML5 doctype时早已消失.
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.
如何让IE尊重我的身高?
How do I make IE honor my min-height?
如何使这种布局有效?
推荐答案
此为解决方法:
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/
jsfiddle: http://jsfiddle.net/d5syw3dc/
这篇关于Internet Explorer不尊重我的最低身高:使用Flexbox时达到100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
