¿Por qué ciertas declaraciones DOCTYPE causan tablas y divs 100% -height para dejar de funcionar?

Me parece que algunos DOCTYPE declaraciones en IE (6-8) pueden hacer que el navegador para ignorar height="100%" en las tablas y divs (style="height:100%")¿Por qué ciertas declaraciones DOCTYPE causan tablas y divs 100% -height para dejar de funcionar?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test1</title> 
</head> 
<body> 
    <div style="border: 2px solid red; height: 100%"> 
    Hello World 
    </div> 
</body> 
</html>

hará que el DIV con la altura del texto, no se estirará. Al eliminar la declaración DOCTYPE, el DIV se estira verticalmente según lo deseado.

Así que mis preguntas son:

¿Por qué sucede?
¿cómo se mantiene la DOCTYPE y todavía permiten que las tablas para estirar?
¿Qué le sucedió a usted?
¿Lo sabías ?, ¿es bien conocido?

Fuente

2010-01-04 Eran Medan

Hay una razón específica por la cual 'altura: 100%' funciona sin un DOCTYPE. Vea mi explicación aquí: http://stackoverflow.com/a/32215263/3597276 –

Dado que los navegadores antiguos tenían un comportamiento extraño, incoherente y navegadores tratan como doctypes an intelligence test para ver si el autor está escribiendo código para los estándares o para lo que aprendieron de W3Schools hace una década. Si tiene height: 100% y la altura del elemento padre es auto continuación 100% means auto.
En general, no lo hace. Grita "layout table". Dicho esto, establezca alturas o alturas mínimas en los elementos html y body. Hay otras técnicas, pero no tengo un vínculo útil en este momento, ya que, curiosamente, nunca he estado en una posición en la que necesité la técnica.
es lo que se supone que los navegadores que hacer, así que ...
Bien, estoy respondiendo a esta pregunta ...

Fuente

2010-01-04 06:50:25 Quentin

¿Entonces eliminar la declaración DOCTYPE es pura maldad? ¿Y tener pies de página que se peguen al fondo es una mala IU? –

Sí y no. Es posible que esté malinterpretando mi comentario acerca de tener la parte inferior de una ** tabla ** pegada en la parte inferior de la ventana y/o página (la que sea más larga). – Quentin

Por lo tanto, para entenderlo, no es el problema, sino el patrón de "tabla de diseño" porque a) no se puede usar (si conserva DOCTYPE) yb) también es una mala práctica (http : //www.hotdesign.com/seybold/). Para hacerlo, uno debe usar otras técnicas (por ejemplo, DIVs y CSS puramente). ¿Lo entendí bien? –

Cuando se quita el tipo de documento que el navegador entra en modo de peculiaridades, que hace las cosas de manera diferente para ayudar al código anterior que no está validado para representarse correctamente.

usted tiene que fijar la altura sobre el elemento contenedor para el div con altura de 100% no hereda height: auto;

Usted podría intentar un cambio de transición a la estricta pero dudo que esto va a solucionar el problema.

Fuente

2011-10-05 15:58:29 brian

Una solución real a este "problema" sería utilizar el siguiente CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    border: none; 
    height: 100%; 
} 

#mydiv { 
    height: 100%; 
}

Sin embargo recordar que una frontera agrega altura.

Fuente

2012-02-10 10:21:58 MMM

¡Gracias! Faltaba el selector html –

¿Por qué ciertas declaraciones DOCTYPE causan tablas y divs 100% -height para dejar de funcionar?

Respuesta

Cuestiones relacionadas