3

有人可以帮我弄清楚为什么背景中带有红色框的包装器不是填充容器 html 的完整 100% 高度，主体 - 布局应该是弹性的，所以如果你要删除文章中的段落，它应该全部完全适合同一个窗口。如果您知道可能工作的 webkit 或 moz 属性，-ms-flex 中可能有替代方法 - 让我知道留言谢谢，您还需要在 IE10 fiddle 中查看此内容

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>
4

1 回答 1

0

如果您将 html 代码裁剪为此，我会看到红色包装器在后台已满。如果我弄错了，更多细节会有所帮助。页脚只是覆盖它的其余部分。

希望能帮助到你。

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>

于 2015-05-04T04:53:01.807 回答