html - CSS -ms-flex 盒子模型布局

Question

谁能帮我弄清楚为什么背景中带有红色框的包装器不是完全 100% 高度填充容器 html、body - 布局应该是 flex 的，所以如果您要删除文章中的段落它应该完全适契约(Contract)一个窗口。如果您知道可能有效的 webkit 或 moz 属性，则 -ms-flex 中可能有替代方案 - 让我知道，请留言谢谢，您还需要在 IE10 中查看 fiddle here

CSS:

    html, body
    {
        height:100%; min-height:100% !important; background-color:#000; margin:0px; display:-ms-flexbox; -ms-flex:1
    }

    .wrapper
    {
        display:-ms-flexbox; -ms-flex-flow:column; -ms-flex-align:stretch; -ms-flex-item-align:center; width:100%;  background-color:#f00; min-width:1000px
    }
    .wrapper
    {
        -ms-flex:1; -ms-flex-direction:column; height:100%; 
    }
    header
    {
        height:140px; background-color:#ff6a00; min-width:1000px; 
    }
    footer
    {
        height:140px; background-color:#b6ff00; min-width:1000px;
    }
    #header, #footer, #body
    {
        max-width:1000px;
    }
    #header, #footer
    {
        margin:auto
    }
    #body
    {
        background-color:#0ff; -ms-flex:1 auto; display:-ms-flexbox; -ms-flex-item-align:center; width:100%
    }
    #body > nav
    {
        width:200px; background-color:#ae12ed; 
    }
    #body > article
    {
        background-color:#4cff00; -ms-flex:1; 
    }
    #body > aside
    {
        width:200px; background-color:#ff0a28
    }
    header
    {
        display:-ms-flexbox
    }
    #header
    {
        display:-ms-flexbox;
        -ms-flex-flow:row;
        -ms-flex:1; background-color:#fc7705
    }
    #header > div
    {
        background-color:#313131; -ms-flex:1
    }
    #header > #logo-menu
    {
        -ms-flex:4;
        display:-ms-flexbox; -ms-flex-direction:column
    }
    #header > #login-search
    {
        -ms-flex:2;
        display:-ms-flexbox; -ms-flex-direction:column; -ms-flex-item-align:center           
    }
    #logo
    {
        background-color:#5205f8; -ms-flex-direction:row; -ms-flex:1 
    }
    #menu
    {
        background-color:#0e04ff; height:50px
    }
    #login
    {
        background-color:#15a10f; -ms-flex-item-align:end; padding:8px
    }
    #search
    {
        background-color:#d0cc16; -ms-flex-item-align:end 
    }

html:

<div class="wrapper">
    <header>
        <div id="header">
            <div id="logo-menu">
                <div id="logo">Logo</div>
                <div id="menu">Menu</div>
            </div>
            <div id="login-search">
                <div id="login">Login</div>
                <div id="search">Search bar</div>
            </div>
        </div>
    </header>
    <div id="body">
        <nav>Nav</nav>
        <article>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
        </article>
        <aside>Aside</aside>
    </div>
    <footer>
        <div id="footer">
            Footer
        </div>
    </footer>
</div>

Answer 1

如果将 html 代码裁剪成这样，我会看到背景中的红色 wrapper 已满。如果我弄错了，更多的细节会有所帮助。页脚只是覆盖了它的其余部分。

希望对您有所帮助。

html, body
        {
            height:100%; min-height:100% !important; background-color:#000; margin:0px; display:-ms-flexbox; -ms-flex:1
        }

        .wrapper
        {
            display:-ms-flexbox; -ms-flex-flow:column; -ms-flex-align:stretch; -ms-flex-item-align:center; width:100%;  background-color:#f00; min-width:1000px
        }
        .wrapper
        {
            -ms-flex:1; -ms-flex-direction:column; height:100%; 
        }
        header
        {
            height:140px; background-color:#ff6a00; min-width:1000px; 
        }
        footer
        {
            height:140px; background-color:#b6ff00; min-width:1000px;
        }
        #header, #footer, #body
        {
            max-width:1000px;
        }
        #header, #footer
        {
            margin:auto
        }
        #body
        {
            background-color:#0ff; -ms-flex:1 auto; display:-ms-flexbox; -ms-flex-item-align:center; width:100%
        }
        #body > nav
        {
            width:200px; background-color:#ae12ed; 
        }
        #body > article
        {
            background-color:#4cff00; -ms-flex:1; 
        }
        #body > aside
        {
            width:200px; background-color:#ff0a28
        }
        header
        {
            display:-ms-flexbox
        }
        #header
        {
            display:-ms-flexbox;
            -ms-flex-flow:row;
            -ms-flex:1; background-color:#fc7705
        }
        #header > div
        {
            background-color:#313131; -ms-flex:1
        }
        #header > #logo-menu
        {
            -ms-flex:4;
            display:-ms-flexbox; -ms-flex-direction:column
        }
        #header > #login-search
        {
            -ms-flex:2;
            display:-ms-flexbox; -ms-flex-direction:column; -ms-flex-item-align:center           
        }
        #logo
        {
            background-color:#5205f8; -ms-flex-direction:row; -ms-flex:1 
        }
        #menu
        {
            background-color:#0e04ff; height:50px
        }
        #login
        {
            background-color:#15a10f; -ms-flex-item-align:end; padding:8px
        }
        #search
        {
            background-color:#d0cc16; -ms-flex-item-align:end 
        }

<div class="wrapper">
        <header>
            <div id="header">
                <div id="logo-menu">
                    <div id="logo">Logo</div>
                    <div id="menu">Menu</div>
                </div>
                <div id="login-search">
                    <div id="login">Login</div>
                    <div id="search">Search bar</div>
                </div>
            </div>
        </header>
        <div id="body">
            <nav>Nav</nav>
            <aside>Aside</aside>
        </div>
    </div>