6

Webページのレイアウトは次のとおりです。次のCSSコードは、Internet Explorer 9で100％の高さと幅を提供しますが、FFとChromeでは100％の幅を提供しますが、100％の高さは提供しません。私はいくつかの例を試しましたが、それらのほとんどは同じ問題を抱えています。私はhttp://jsfiddle.net/cwkzq/3/で同じコードを使用していますが、同じように表示すると、幅だけでなく高さも100％になります。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            html, body {
                height: 100%;
            }
            body {
                margin: 0;
                padding: 0;
                border: 1;
                background-color:Aqua;
            }
            .Container {
                width: 100%;
                height: 100%;
                border: solid 1px red;
                margin: 0 auto;
                padding: 0 1em;
                font: 12px/1.5 Verdana;
                background-color:red;
            }
        </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <!--  Container    -->
    <div class="Container">
        <!--  TopMenu Bar    -->
        <div class="colorBar">
        asd
        </div>
        <!--  TopMenu Bar   -->
        <!--  Middle Part    -->
        <div class="MiddleWrapper">
            <!--  Left Title    -->
                <div class="Title">

                </div>
            <!--   Left Title   -->
            <!--   Large Image   -->
                <div class="ImageLeftWrapper">

                </div>
            <!--   Large Image   -->
            <!--  Logo Wrapper    -->
                <div class="LogoWrapper">

                </div>
            <!--   Logo Wrapper   -->
            <!--   Page Text Area  -->
                <div class="PageText">

                </div>
            <!--   Page Text Area   -->
            <!--  Search Bar    -->
                <div class="SearchBar">

                </div>
            <!--   Search Bar    -->
            <!--   Banner Images -->
                <div class="BannerImageWrapper">

                </div>
            <!--  Banner Images   -->
        </div>
        <!--  Middle Part    -->
        <!--   Menu Wrapper    -->
        <div class="MenuWrapper">

        </div>
        <!--   Menu Wrapper    -->
        <!--   Footer Section  -->
        <div class="FooterWrapper">

        </div>
        <!--  Footer Section  -->
    </div>
    <!--  Container   -->
    </form>
    </body>
    </html>

誰かがコードの問題を指摘できれば幸いです。

4

1 に答える 1

12

高さをパーセンテージに設定すると、親要素にも高さが設定されている場合にのみ効果があります。したがって、divを100％の高さに設定する場合は、フォームとボディも100％の高さに設定する必要があります。

于 2012-06-06T11:27:39.063 に答える