100％容器div标签的高度和宽度不起作用

我的网页布局如下。下面的CSS代码给我100％的高度&在Internet Explorer 9的宽度。虽然相同的确使我在Chrome浏览器100％宽度，但不是100％的高度。我尝试了几个例子，其中大部分都有相同的问题。我在这里使用相同的代码http://jsfiddle.net/cwkzq/3/如果我查看它相同的FF它给我100％的高度以及宽度。100％容器div标签的高度和宽度不起作用

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

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

来源

2012-06-06 Learning

我建议你包含一个DOCTYPE标签，这样你就会知道这不是问题的根源;） – poepje

将高度设置为百分比只有在父元素也设置了高度时才起作用。因此，如果您想将div设置为100％高度，则还必须将窗体和身体设置为100％高度。

来源

2012-06-06 11:27:39 Sjoerd

是的，你是绝对正确的，我忘了提及表单高度'html，body，form {height：100％;}'现在正在工作。这些小小的错误有时可能会非常广泛。谢谢 – Learning

一个完美的例子虽然在这里不相关，但总是包含你的花车。如果它不在块级别的包装中，它会浮现出来。使用％设置值时也是如此。它们默认情况下取决于它们的父容器。即如果p {font-size：90％}和p p {font-size：90％}

foobar

会得到90％的90％，即81％。所以foobar将以81％的字体大小输出。我花了一段时间才明白CASCADE样式表CASCADE。直到最近我才知道他们做到了，但没有达到这个水平。 – eusid

100％容器div标签的高度和宽度不起作用

回答

相关问题