100%高度&容器div标记的宽度无效 [英] 100% Height & Width of container div tag not working

查看:143
本文介绍了100%高度&容器div标记的宽度无效的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个以下的网页布局。下面的CSS代码给我100%的高度&宽度在Internet Explorer 9.虽然同样给我100%宽度的FF& Chrome但不是100%高度。我试过几个例子大多数都有同样的问题。我在 http://jsfiddle.net/cwkzq/3/ 上使用相同的代码,如果我查看相同的FF它给出我100%的高度以及宽度。

I have a following layout of my web page. Following CSS code gives me 100% Height & Width in Internet Explorer 9. While same does gives me 100% width in FF & Chrome but not 100% height. I tried several example most of them have the same issue. I have use same code on http://jsfiddle.net/cwkzq/3/ here if i view same it FF it gives me 100% height as well as width.

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

如果有人可以指出代码中的问题,我将不胜感激。

I would appreciate if someone can point to the problem in the code.

推荐答案

将高度设置为百分比只有在父元素也设置了高度时才有效。所以,如果你想设置div为100%的高度,你还必须设置窗体和正文为100%的高度。

Setting the height to a percentage only has effect when the parent element also has a height set. So if you want to set the div to 100% height, you also have to set the form and the body to 100% height.

这篇关于100%高度&amp;容器div标记的宽度无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆