Question

我刚刚使用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>

Answer 1

我已采用您的代码并将样式拆分为单独的样式表，以便于排除故障。我还清理了它，修复了拼写错误（flex-flew）并删除了不必要的代码。

除此之外，我已经使用了正确的术语并删除了不需要的Flexbox功能（例如flex: 1 1 200px;与在flex-element上说flex: 1; width: 200px;基本相同，但那取决于个人）。

真正做到这一点的唯一方法是删除height: 100%并完全依赖于flexbox。

这是一个更新的小提琴：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;
}

Answer 2

我最近遇到了同样的行为并在此主题中找到了解决方案：How to make flexbox children 100% height of their parent?

＆＃34; Brett Postin＆＃34;使用＆＃34;位置：绝对;底部：0＆＃34;创建一个全高容器的技巧因为＆＃34;高度：100％＆＃34;由于柔性箱儿童没有使用明确的高度来确定其高度，因此无法正常工作。

Flexbox：我的div没有全高

2 个答案: