Css 100%高度和高度；集装箱div标签的宽度不工作_Css_Html_Height_Width

Css 100%高度和高度；集装箱div标签的宽度不工作

css html

Css 100%高度和高度；集装箱div标签的宽度不工作,css,html,height,width,Css,Html,Height,Width,我的网页有如下布局。下面的CSS代码在InternetExplorer9中为我提供了100%的高度和宽度。同样的，FF和Chrome也提供了100%的宽度，但不是100%的高度。我试过几个例子，大多数都有相同的问题。我在这里使用相同的代码，如果我看到相同的，它会给我100%的高度和宽度 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title><

我的网页有如下布局。下面的CSS代码在InternetExplorer9中为我提供了100%的高度和宽度。同样的，FF和Chrome也提供了100%的宽度，但不是100%的高度。我试过几个例子，大多数都有相同的问题。我在这里使用相同的代码，如果我看到相同的，它会给我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>


html，正文{
身高：100%；
}
身体{
保证金：0；
填充：0；
边界：1；
背景色：浅绿色；
}
.集装箱{
宽度：100%；
身高：100%；
边框：实心1px红色；
保证金：0自动；
填充：0.1em；
字体：12px/1.5 Verdana；
背景色：红色；
}
自闭症

如果有人能指出代码中的问题，我将不胜感激。

仅当父元素也设置了高度时，将高度设置为百分比才有效。因此，如果您想将div设置为100%高度，还必须将表单和正文设置为100%高度。

是的，您完全正确。我忘了提到表单高度`html，body，form{height:100%；}`它现在正在工作。这些小错误有时会非常严重。谢谢一个完美的例子，虽然这里不相关，但它总是包含你的浮动。如果它不在块级包装器中，它将被遗忘。使用%设置值时也是如此。默认情况下，它们取决于其父容器。i、 e.如果p{font size:90%}和p{font size:90%}foobar

将得到90%的90%，即81%。因此，foobar将以81%的字体大小输出。我花了一段时间才意识到级联样式表是如何级联的。我知道他们做了，但直到最近才达到这个级别。我建议您包括一个DOCTYPE标记，这样您就会知道这不是问题的根源；）