3

背景に赤いボックスがあるラッパーがコンテナーの html、body を埋める完全な 100% の高さではない理由を誰かが理解するのを手伝ってくれますか?記事の段落を削除する場合は、すべて同じウィンドウに完全に収まります。動作する可能性のある Webkit または moz 属性を知っている場合は、-ms-flex に代替手段がある可能性があります。メッセージを残してお知らせください。また、IE10 フィドルでこれを表示する必要があります。

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 に答える