Altura y ancho del 100% de la etiqueta div del contenedor no funciona

Tengo un diseño siguiente de mi página web. El siguiente código CSS me da 100% de altura & Ancho en Internet Explorer 9. Aunque lo mismo me da 100% de ancho en FF & Chrome pero no 100% de alto. Intenté varios ejemplos, la mayoría de ellos tienen el mismo problema. He usado el mismo código en http://jsfiddle.net/cwkzq/3/ aquí si lo veo en FF me da 100% de altura y ancho.Altura y ancho del 100% de la etiqueta div del contenedor no funciona

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

Agradecería que alguien pudiera señalar el problema en el código.

Fuente

2012-06-06 Learning

Le sugiero que incluya una etiqueta DOCTYPE, de esta manera siempre sabrá que no es la fuente del problema;) – poepje

Establecer la altura en un porcentaje solo tiene efecto cuando el elemento principal también tiene un conjunto de altura. Por lo tanto, si desea establecer el div a una altura del 100%, también debe configurar la forma y el cuerpo al 100% de altura.

Fuente

2012-06-06 11:27:39 Sjoerd

Sí, tiene toda la razón me olvidé de mencionar la altura del formulario 'html, body, form {height: 100%;} 'Está funcionando ahora. Este pequeño error puede ser tan expansivo a veces. Gracias – Learning

Un ejemplo perfecto aunque no relevante aquí siempre contiene tus carrozas. Si no está dentro de un contenedor de nivel de bloque, flotará en el olvido. Lo mismo es cierto cuando se usa% para establecer valores. Están supeditados a sus contenedores principales por defecto. es decir, si p {font-size: 90%} y p p {font-size: 90%}

foobar

obtendrías el 90% del 90% que es el 81%. Así foobar se produciría en un 81% de tamaño de fuente. Me tomó un tiempo darme cuenta de cómo CASCADING hojas de estilo CASCADE. Sabía que lo hicieron pero no hasta este nivel hasta hace poco. – eusid

Altura y ancho del 100% de la etiqueta div del contenedor no funciona

Respuesta

Cuestiones relacionadas