html - relativa - top css para que sirve
¿Por qué mi altura div 100% funciona solo cuando se elimina DOCTYPE? (5)
Este es el código completo:
<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
<div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>
Nada aparece.
Pero si
doctype
la primera línea (el
doctype
), toda la página es verde como se esperaba.
Tengo dos preguntas:
-
¿Cómo hago que el
divllene la página sin eliminar esa etiqueta? -
¿Por qué eliminar el
doctypehace funcionar?
Propiedad de
height
CSS, valores de porcentaje y DOCTYPE
La
primera parte
de su pregunta sobre cómo aplicar una altura del 100% a su
div
ha sido respondida varias veces por otros.
Básicamente, declare una altura en el elemento raíz:
html { height: 100%; }
Una explicación completa se puede encontrar aquí:
-
Trabajando con la propiedad de
heightCSS y los valores porcentuales .
La segunda parte de su pregunta ha recibido mucha menos atención. Trataré de responder eso.
¿Por qué eliminar el
doctypehace que [el fondo verde] funcione?
Cuando elimina el DOCTYPE ( declaración de tipo de documento ), el navegador cambia del modo estándar al modo peculiar .
En el modo peculiar , también conocido como modo de compatibilidad , el navegador simula un navegador antiguo para que pueda analizar páginas web antiguas, páginas creadas antes de la llegada de los estándares web. Un navegador en modo peculiar pretende ser IE4 , IE5 y Navigator 4 para que pueda representar el código antiguo como el autor pretendía.
Así es como Wikipedia define el modo peculiaridades:
En informática, el modo peculiar se refiere a una técnica utilizada por algunos navegadores web con el fin de mantener la compatibilidad con páginas web diseñadas para navegadores antiguos, en lugar de cumplir estrictamente con los estándares W3C e IETF en modo estándar.
Aquí está la toma de MDN :
En los viejos tiempos de la web, las páginas se escribían generalmente en dos versiones: una para Netscape Navigator y otra para Microsoft Internet Explorer. Cuando los estándares web se hicieron en W3C, los navegadores no podían simplemente comenzar a usarlos, ya que hacerlo rompería la mayoría de los sitios existentes en la web. Por lo tanto, los navegadores introdujeron dos modos para tratar los nuevos sitios que cumplen con los estándares de manera diferente a los sitios heredados antiguos.
Ahora, esta es la razón específica por la que la
height: 100%
en su código funciona en modo peculiar pero no en modo estándar:
En
el modo estándar
, si el elemento padre tiene una
height: auto
(sin altura definida), entonces las alturas porcentuales de los elementos secundarios también se tratarán como
height: auto
(
según la especificación
).
Es por eso que la respuesta a su primera pregunta es
html { height: 100%; }
html { height: 100%; }
.
Para la
height: 100%
para trabajar en su
div
, debe establecer una
height
en los elementos principales (
más detalles
).
Sin embargo, en el modo peculiar, si el elemento primario tiene una
height: auto
, entonces las alturas porcentuales de los elementos secundarios se miden en
relación con la ventana gráfica
.
Aquí hay tres referencias que cubren este comportamiento:
- IE4
- https://.com/a/1966377/3597276
- https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior
TL; DR
Esto es lo que los desarrolladores necesitan saber en pocas palabras:
Un navegador en modo peculiar mostrará las páginas web de una manera impredecible, poco confiable y a menudo indeseable. Por lo tanto, siempre incluya un DOCTYPE para que el documento se procese en modo estándar .
Seleccionar el DOCTYPE correcto solía ser un proceso ambiguo y algo confuso con muchas versiones de DOCTYPE para elegir . Pero hoy el proceso es tan simple como siempre. Solo usa:
<!DOCTYPE html>
¿Quieres decir verticalmente? Los div son elementos de nivel de bloque y, como tales, llenan el padre horizontalmente de forma predeterminada.
Para que esto funcione, también debe darle a la etiqueta HTML una altura del 100%.
html, body { height:100%; }
Vea aquí para una muestra de trabajo:
http://jsfiddle.net/uhg0y9tm/1/
Como lo indican algunos de los otros aquí, una vez que elimine la primera línea (el doctype HTML5), los navegadores mostrarán la página de una manera diferente y, en ese caso, no es necesario darle a la etiqueta HTML una altura explícita del 100%.
Con el doctype HTML5, también debe establecer la altura en el elemento html:
html {
height:100%;
}
Debería hacer que sus etiquetas html y body tengan una altura del 100% para llenar la página.
css:
html, body{
height: 100%;
}
También deberá establecer el ancho y el alto de las etiquetas
<html>
y
<body>
al 100% porque cuando asigna el ancho y alto de
<div>
al 100%, significa que le está asignando el ancho completo y altura de su elemento padre, en este caso el elemento padre de
<div>
es
<body>
y el elemento padre de
<body>
es
<html>
.
¿Por qué funciona cuando
<!DOCTYPE html>etiqueta<!DOCTYPE html>?
Porque cuando elimina la etiqueta
<!DOCTYPE html>
, el navegador muestra la página de manera diferente, mostrando otros resultados.