www - etiqueta html
¿Por qué ciertas declaraciones de DOCTYPE hacen que las tablas y divs del 100% de altura dejen de funcionar? (3)
Me parece que algunas declaraciones de DOCTYPE en IE (6-8) pueden hacer que el navegador ignore height="100%" en tablas y divs ( style="height:100%" )
P.ej
<!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>
Renderizará el DIV con la altura del texto, no se estirará. Al eliminar la declaración DOCTYPE , el DIV estira verticalmente como se desea.
Así que mis preguntas son:
- ¿Por que sucede?
- ¿Cómo conservas el
DOCTYPEy aún permites que las mesas se estiren? - ¿Te ha pasado?
- ¿Lo sabías ?, ¿es bien conocido?
Debido a que los navegadores antiguos tenían comportamientos extraños e inconsistentes, los navegadores tratan a los Doctypes como una prueba de inteligencia para ver si el autor está escribiendo código para los estándares o lo que aprendieron de W3Schools hace una década. Si tiene
height: 100%y la altura del elemento padre esautoentonces100%significaauto.En general, no lo haces. Grita " mesa de diseño ". Dicho esto, establezca alturas o alturas mínimas en los elementos html y body. Hay otras técnicas, pero no tengo un enlace útil en este momento ya que, curiosamente, nunca he estado en una posición donde necesitaba la técnica.
Es lo que los navegadores deben hacer, así que ...
Bueno, estoy respondiendo a esta pregunta ...
Cuando elimina el doctype, el navegador entra en el modo de peculiaridades, que hace las cosas de manera diferente para ayudar a los códigos más antiguos que no están validados para representarse correctamente.
Debe establecer la altura en el elemento contenedor para que el div con 100% de altura no herede la altura: auto;
Puede intentar cambiar de transicional a estricto, pero dudo que esto solucione su problema.
Una solución real para este "problema" sería usar el siguiente CSS:
html, body {
margin: 0;
padding: 0;
border: none;
height: 100%;
}
#mydiv {
height: 100%;
}
Sin embargo recuerda que un borde añade altura.