コンテナdivタグの高さと幅が100％でない

私のウェブページのレイアウトは次のとおりです。 CSSコードに従うと、Internet Explorer 9で100％の高さである&幅が得られます。同じことがFF &では100％の幅を与えますが、100％の高さではありません。私はそれらのほとんどが同じ問題を抱えているいくつかの例を試しました。私はhttp://jsfiddle.net/cwkzq/3/で同じコードを使用していますが、私は同じことをFFで見ると100％の高さと幅を与えます。コンテナdivタグの高さと幅が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>

誰かがコード内の問題を指摘できるかどうかは分かります。

出典

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のほんの一部を実現するには、しばらく時間がかかりました。私は彼らが最近まで知っていたが、このレベルまではなかった。 – eusid

コンテナdivタグの高さと幅が100％でない

答えて

関連する問題