我打算放弃使用“浮动布局”，转而在未来的项目中使用CSS弹性盒子。我很高兴地看到，所有主要的浏览器在它们当前版本中似乎都支持（以某种方式）弹性盒子。
我去"Solved by Flexbox"查看了一些示例。然而，“粘性底部”示例在Internet Explorer 11中似乎不起作用。我进行了一些尝试，并通过给<html>添加display:flex和给<body>添加width:100%使其正常工作。
因此，我的第一个问题是：有人能解释一下这个逻辑吗？我只是摆弄了一下，它就工作了，但我不太明白为什么它要这样工作...
然后是“媒体对象”示例，在除了Internet Explorer之外的所有浏览器中都可以工作。我也尝试了一些方法，但没有成功。
因此，我的第二个问题是：有没有“干净”的方法让“媒体对象”示例在Internet Explorer中工作？
flex属性的默认值为0 0 auto而不是0 1 auto"flex:1，它在所有浏览器中的表现并不相同。尝试将其更改为1 0 0，您可能会发现它“差不多”起作用。@-moz-document url-prefix() {
#flexible-content{
flex: 1;
}
}
由于 flexbox 目前只是 W3C 候选标准，而不是官方标准，所以各个浏览器的表现可能会有所不同，但我猜这种情况在不久的将来会发生改变。
如果有更好的答案，我很想知道！
-ms-flex: 1 0 0;，而IE11需要flex: 1 0 0;..？ - Eysteinflex: 1 0 0;。但是 flex: 1 0 0%;（注意 % 符号）或者 flex: 1 0 auto; 可以正常工作。 - Eysteinflex: 1; 就解决了问题。
不过，这可能取决于你想要实现什么效果... - Odisseasflex-basis的方式。Github上有一个很好的讨论，解释了为什么在某些情况下flex:1 0 100%适用于IE11，而在其他情况下flex: 1 0 0%或者flex: 1 0 auto适用。你必须提前知道内容。 - P.Brian.Mackeyhtml,body上设置height:100%，看起来已经解决了我的问题。谢谢。 - Kenmore使用另一个 Flex 容器来解决 IE10 和 IE11 中的 min-height 问题：
HTML
<div class="ie-fixMinHeight">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
CSS
.ie-fixMinHeight {
display:flex;
}
#page {
min-height:100vh;
width:100%;
display:flex;
flex-direction:column;
}
#content {
flex-grow:1;
}
请查看演示。
body 上使用 flexbox 布局，因为这会破坏通过 jQuery 插件（自动完成、弹出框等）插入的元素。height:100% 或 height:100vh，因为这会导致页脚固定在窗口底部且不适应长内容。flex-grow:1 而不是 flex:1，因为 IE10 和 IE11 的默认值为 0 0 auto 而不是 0 1 auto。.ie-fixMinHeight中添加flex-direction: column，以避免产生副作用。如果您没有IE特定的HTML，可以使用.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }。 - Mark Horganheight与min-height之间的区别是关键。 - TyCobbflex:1；这将解决IE11的问题。我支持Odisseas的观点。此外，请将html和body元素的高度分别设为100%。html, body{
height:100%;
}
body {
border: red 1px solid;
min-height: 100vh;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header {
background: #23bcfc;
}
main {
background: #87ccfc;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
footer {
background: #dd55dd;
}
working url: http://jsfiddle.net/3tpuryso/13/
display: flex;和相关样式应用于body和容器：http://jsfiddle.net/Skateside/nezdrrkr/ - James Longmain的内容无法正常增长（至少在Chrome中）; 如果添加足够的内容，它将超出页脚。 http://jsfiddle.net/3tpuryso/65/ - FoolishSethhtml设置为min-height: 100%，以便根据内容自适应大小。 - Odisseas<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
.main {
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
align-items: stretch;
min-height: 100vh;
}
.main::after {
content: '';
height: 100vh;
width: 0;
overflow: hidden;
visibility: hidden;
float: left;
}
.left {
width: 200px;
background: #F0F0F0;
flex-shrink: 0;
}
.right {
flex-grow: 1;
background: yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<div style="height: 300px;">
</div>
</div>
<div class="right">
<div style="height: 1000px;">
test test test
</div>
</div>
</div>
</body>
</html>