
Entonces, ¿quieres que el fondo de tu sitio web sea rojo, eh? Probablemente pondrás esto en tu CSS:
body {
background: red;
}
¡Hecho!
Check out this Pen!
Te ocupas de tus asuntos y, de repente, un día sucede esto:
Check out this Pen!
¿Qué diablos? ¿Por qué el rojo está cortado así? ¿Puse rojo como color de fondo en el cuerpo?
Lo hiciste, pero el hecho de que ese color rojo inunde el fondo es solo una extraña anomalía de CSS. En realidad, el elemento del cuerpo no es tan alto como la ventana del navegador. Es tan alto como el contenido que contiene, como un div o cualquier otra cosa.
Ver:
En ausencia de un fondo en el elemento html, el fondo del cuerpo cubrirá la página. Si hay un fondo en el elemento html, el fondo del cuerpo se comporta como cualquier otro elemento.
En algún lugar de la línea, un background-color
se puso en el html
elemento.
Quizás esté usando normalize.css 2.1.1, que incluyó establecer el fondo en blanco en el elemento html para “Evitar que el color de fondo del esquema de color del sistema se use en Firefox, IE y Opera”. Desde entonces, esto se ha revertido, presumiblemente porque causó este problema de manera demasiado generalizada.
Para “arreglarlo”, simplemente elimine el fondo en el elemento html, o mueva lo que quiera “inundar” siempre al elemento html ya que su comportamiento es consistente.