Altura 100% no funciona para la etiqueta DIV en Internet Explorer 8

Tengo el siguiente código que estoy usando para mostrar una herramienta de búsqueda con una sección de resultados de desplazamiento. En IE el código funciona bien:Altura 100% no funciona para la etiqueta DIV en Internet Explorer 8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html style="background:black;height:100%;width:100%;"> 
    <head> 
     <title>Report</title> 
    </head> 
    <body style="background:black;"> 
     <table HEIGHT="100%" WIDTH="100%" style="background:red;"> 
     <tr> 
     <td> 
     Search Area 
     </td> 
     </tr> 
     <tr> 
     <td HEIGHT="100%" WIDTH="100%" style="background:orange;"> 
     <div style="overflow-y:scroll;height:100%;"> 
      <table style="width:100px;height:1000px;"> 
      <tr> 
      <td style="background:white;"> 
      Results Area 
      </td> 
      </tr> 
      </table> 
     </div>  
     </td> 
     </tr> 
     </table> 
    </body> 
    </html>

Pero cuando me puse la etiqueta meta de utilizar el formato IE8 añadiendo: etiqueta DIV

<meta http-equiv='X-UA-Compatible' content='IE=edge' />

La parte inferior se expande más allá de la página. Sin embargo, he intentado una serie de opciones y no puedo encontrar una manera de evitarlo sin especificar realmente una altura para los valores. Lo cual no funcionará, ya que quiero que la página ocupe el 100% de la pantalla sin importar el tamaño de la ventana del navegador.

Cualquier ayuda sería muy apreciada.

Fuente

2009-10-07 Anonymous

Debe establecer todos los márgenes y rellenos para los elementos principales en cero para obtener lo que desea.

Actualización: Disculpe, no entendí el problema de una vez. La pista de Ben debería ser la mejor que asumo. :)

Actualización 2: Vaya, como Ben ha borrado su respuesta, mi primera actualización no tiene ningún sentido. Intenta establecer la altura del cuerpo al 100%, eso debería resolver el problema.

Fuente

2009-10-07 18:19:23 arno

Mi comprensión sobre CSS de navegador cruzado no es tan grande, por lo que podría no ser la mejor solución, pero es una solución.

Por lo que he visto, siempre tiene que establecer el alto/ancho del contenedor que desea desbordar, por lo que debe configurarlos.

Para tratar con la resolución, le sugiero que agregue un script jQuery en el evento onReady que dinámicamente arreglaría el alto y el ancho haciendo que funcione el desbordamiento.

Fuente

2009-10-07 18:19:50 tucaz

Tuve un problema similar al tuyo y finalmente la solución fue modificar una entrada de línea CSS que tenía un modificador !important para una declaración de altura fija. En el código HTML, la clase (definida en CSS) tenía el height asignado a 100%, pero el CSS aplicó el !important durante la carga del estilo.

Fuente

2009-12-16 16:22:12 ocell

Esta metaetiqueta permite la representación correcta de CSS, y en CSS - por diseño - height:100%basically doesn't work.

que necesita para dar altura específica a cada único ancestro del elemento, incluyendo <body>, <table>, <tr> e incluso <tbody> elemento que se inserta automáticamente por el analizador.

De todos modos, este diseño se puede lograr de manera más fácil:

.topBanner { 
    position:absolute; position:fixed; 
    height:2em; 
    top:0; left:0; width:100%; 
} 
body {padding-top: 2em}

esto degradará muy bien en IE6, ya diferencia de overflow, funcionará correctamente en Mobile Safari.

Fuente

2009-12-20 23:52:41 Kornel

Editar:

Extracción de la declaración DOCTYPE hará height = "100%" de trabajo, pero pone el navegador en modo peculiaridades, sin embargo, que no es deseable.

En general, se desaconseja usar tablas para el diseño, por lo que debería usar CSS.

Por ejemplo: http://jsfiddle.net/rf649/7/

HTML

<div id="search">Search Area</div> 
<div id="results">Results Area</div>

CSS:

#search { 
    background-color: red; 
    position: fixed; 
    height: 150px; 
    width: 100%; 
} 
#results{ 
    background-color: orange; 
    position: fixed; 
    top: 150px; 
    width: 100%; 
    bottom: 0; 
    overflow: auto; 
}

Fuente

2010-01-03 19:36:40

Extracción del tipo de documento puede empujar a su página en quirksmode que muy probablemente causar más problemas de lo que arregla. – Joel

@JoelPotter - Estoy de acuerdo, tiene razón, he actualizado la respuesta –

Este CSS también tiene sus problemas en relación con la compatibilidad entre navegadores (aunque probablemente no sea tan malo como eliminar el DOCTYPE), ya que IE6 no maneja adecuadamente ' posición: fijo'. –

Altura 100% no funciona para la etiqueta DIV en Internet Explorer 8

Respuesta

Cuestiones relacionadas