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標籤的高度和寬度不起作用

回答

相關問題