CSS Flexbox 主体和主要最小高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37431563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox body and main min-height
提问by Jens T?rnell
https://jsfiddle.net/vz7cLmxy/
https://jsfiddle.net/vz7cLmxy/
I'm trying to have the body to expand but the min-height does not work. I've read other related topics but can't get my head around it.
我试图让身体膨胀，但最小高度不起作用。我已阅读其他相关主题，但无法理解。
CSS and html
CSS 和 html
body,
html {
padding: 0;
margin: 0;
min-height: 100%;
}
body {
display: flex;
background: #eee;
flex-direction: column;
}
.menu {
background: red;
color: #fff;
padding: 10px;
}
.wrap {
display: flex;
}
.sidebar {
background: #ddd;
width: 300px;
}
.main {
background: #ccc;
flex: 1;
}
.footer {
background: #000;
color: #fff;
padding: 10px;
}<div class="menu">Menu</div>
<div class="wrap">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>
<div class="footer">Footer</div>Expected result is that main is streched to fill the height if it's less than 100%.
预期结果是 main 被拉伸以填充高度，如果它小于 100%。
采纳答案by Randy
Use flex: 1on the centered element:
使用flex: 1的中心元素：
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
background-color:#bbb;
}<body class="Site">
<header>This is the header text ?</header>
<main class="Site-content">…</main>
<footer>This is the footer text ?</footer>
</body>回答by kmgt
To get min-heightwith relative units working even in IE11 it needs just a tiny trick.
min-height即使在 IE11 中也能使用相关单元，只需要一个小技巧。
The nature of min-heightis to overwrite the heightwhen heightis smaller then min-height. Very clear! But the pitfall is when min-heighthas a realitve unit (%or vh) and heightis not set. Since it is relative it has no basis to relay on.
的性质min-height是覆盖heightwhenheight更小 then min-height。非常清楚！但陷阱是什么时候min-height有一个真实的单位（%或vh）并且height没有设置。既然是相对的，就没有依据。
For all major browsers except Internet Explorer one possibility is to change the unit from %to vh:
对于除 Internet Explorer 之外的所有主要浏览器，一种可能性是将单位从 更改%为vh：
body {
min-height: 100vh;
}
For Internet Explorer it needs a height(will be overwritten from min-height):
对于 Internet Explorer，它需要一个height（将从 覆盖min-height）：
body {
height: 1px;
min-height: 100vh;
}
or to keep %the rules has to be applied to htmltoo:
或保持%规则也必须适用于html：
html, body {
height: 1px;
min-height: 100%;
}
A cross browser solution for the OP needs height: 1pxon bodyand of course flex-grow: 1for .wrapto let it grow faster then menuand footer:
对于OP需要一个跨浏览器解决方案height: 1px的body过程中，并flex-grow: 1为.wrap让它成长得更快，然后menu和footer：
body,
html {
padding: 0;
margin: 0;
height: 1px; /* added */
min-height: 100%;
}
body {
display: flex;
background: #eee;
flex-direction: column;
}
.menu {
background: red;
color: #fff;
padding: 10px;
}
.wrap {
display: flex;
flex-grow: 1; /* added */
}
.sidebar {
background: #ddd;
width: 300px;
}
.main {
background: #ccc;
flex: 1;
}
.footer {
background: #000;
color: #fff;
padding: 10px;
}<div class="menu">Menu</div>
<div class="wrap">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>
<div class="footer">Footer</div>