Si bien el diseño diseños me puse los html, bodyelementos heighta 100%, pero en algunos casos, esto no funciona, así que lo que se debe utilizar?
html, body {
height: 100%;
}
o
html, body {
min-height: 100%;
}
Bueno, esto no se basa en opiniones ya que cada método tiene sus propios defectos, entonces, ¿cuál es la forma recomendada a seguir y por qué?
Si está tratando de aplicar imágenes de fondo htmly bodyeso llena toda la ventana del navegador, tampoco. Use esto en su lugar:
html {
height: 100%;
}
body {
min-height: 100%;
}
Mi razonamiento se da aquí (donde explico holísticamente cómo aplicar los fondos de esta manera):
Por cierto, la razón por la que debe especificar
heightymin-heightparahtmlybodyrespectivamente es porque ninguno de los elementos tiene una altura intrínseca. Ambos sonheight: autopredeterminados. Es la ventana gráfica que tiene un 100% de altura, por lo queheight: 100%se toma de la ventana gráfica y luego se aplicabodycomo mínimo para permitir el desplazamiento del contenido.
La primera forma, usar height: 100%en ambos, evita que se bodyexpanda con su contenido una vez que comienzan a crecer más allá de la altura de la ventana gráfica. Técnicamente, esto no evita que el contenido se desplace, pero sí hace bodyque deje un espacio debajo del pliegue, lo que generalmente no es deseable.
La segunda forma, usar min-height: 100%en ambos, no hace bodyque se expanda a la altura completa de htmlporque min-heightcon un porcentaje no funciona a bodymenos que htmltenga un explícito height.
En aras de la exhaustividad, la sección 10 de CSS2.1 contiene todos los detalles, pero es una lectura extremadamente complicada, por lo que puede omitirla si no está interesado en nada más allá de lo que he explicado aquí.
height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of contentsolución fácil y sencilla ... gracias //htmlelemento tieneoverflow:visiblede forma predeterminada, por lo que supongo que las barras de desplazamiento aparecen debido al comportamiento del navegador para permitir que se muestre todo el flujo normal del documento.overflow: autoen la ventana gráfica, que es de donde vienen las barras de desplazamiento. Eso se trata en la sección 11: w3.org/TR/CSS21/visufx.htmlPuede usar la
vhunidad de altura de la ventana gráfica ( ):body { min-height: 100vh; }Es relativo a la pantalla, no a la altura de los padres, por lo que no necesita la altura html: 100%.
fuente