我刚刚使用 Flexbox 创建了一个设计非常简单的网站。使用 Firefox 和 Chrome，一切正常，但使用 IE，我有一个小问题，但很明显。这是页面:http://www.csharpnet.net/article/introduction .如果你用 Firefox 检查它，你会看到左边有一个 100% 的高度，但用 IE，情况并非如此。我一遍又一遍地检查我的 CSS，但我不知道要更改什么。
我检查了所有父元素，它们都有 100% 的高度，那么为什么这边没有这个高度呢？
感谢您的帮助。
编辑:代码示例和fiddle with the code
<html style="height:100%;margin:0;">
<body style="height:100%;margin:0;">
<div style="display:flex;flex-flow:column;height:100%;">
<div style="background-color:green;flex-grow:1;flew-shrink:1;flex-basis:200px;display:flex;flex-flow:row;">
<div style="background-color:yellow;flex-basis:700px;flex-grow:1;flew-shrink:1;"></div>
<div style="background-color:white;flex-basis:100%;flex-grow:1;flew-shrink:1;"></div>
</div>
<div style="background-color:red;flex-grow:1;flew-shrink:1;flex-basis:100%;display:flex;flex-flow:row;">
<div style="background-color:blue;flex-basis:500px;flex-grow:1;flew-shrink:1;"></div>
<div style="background-color:gray;flex-basis:100%;flex-grow:1;flew-shrink:1;">
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</div>
</div>
</div>
</body>
最佳答案
我已经采用了您的代码并将样式拆分为单独的样式表，以便于进行故障排除。我还清理了它，修复了拼写错误 (flex-flew) 并删除了不必要的代码。
除此之外，我使用了正确的术语并删除了不需要的 flexbox 功能(例如 flex: 1 1 200px; 基本上等同于说 flex: 1 ; width: 200px; 在 flex 元素上，但这取决于个人)。
不过，真正有用的是删除 height: 100% 并完全依赖 flexbox。
这是一个更新的 fiddle :http://jsfiddle.net/uako2dsj/2/
记得加前缀，更好的适应IE。
HTML
<body>
<div class="container">
<div class="header">
<div class="yellow"></div>
<div class="white"></div>
</div>
<div class="content">
<div class="blue"></div>
<div class="gray">
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</div>
</div>
</div>
</body>
CSS
html, body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
}
.header {
display:flex;
height: 200px;
background-color:green;
}
.yellow {
width: 700px;
background-color: yellow;
}
.white {
width: 200px;
flex: 1;
background-color: white;
}
.content {
display: flex;
background-color: red;
}
.blue {
width: 500px;
background-color: blue;
}
.gray {
width: 200px;
flex:1;
background-color: gray;
}
关于css - Flexbox:我的 div 没有全高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28034374/