height: 100% o min-height: 100% para html y elementos corporales?

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%;
}

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é?

html css

— Sr. Alien
fuente

192

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 heighty min-heightpara htmly bodyrespectivamente es porque ninguno de los elementos tiene una altura intrínseca. Ambos son height: autopredeterminados. Es la ventana gráfica que tiene un 100% de altura, por lo que height: 100%se toma de la ventana gráfica y luego se aplica bodycomo 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í.

— BoltClock
fuente

Esto es lo que más me gustó de esto :) 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 //

— Sr. Alien

Sin embargo, me pregunto cómo aparecen mágicamente las barras de desplazamiento. El htmlelemento tiene overflow: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.

— Fabrício Matté

@ Fabrício Matté: Se traduce en 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.html

— BoltClock

@BoltClock ¿Alguna idea de cómo llevar al niño al 100% del cuerpo aquí ? Sin embargo

— Mr. Alien

box-sizing: border-box no afecta los márgenes. Acolchado, sí, pero eso depende de las preferencias personales.

— BoltClock

Puede 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%.

— Damjan Pavlica
fuente

Sin embargo, ¿qué ventajas adicionales ofrece esto?

— xji

Sin ventajas adicionales, solo otra forma de resolver el problema.

— Damjan Pavlica

tenga cuidado de cómo los dispositivos móviles entienden esto

— GWorking

Solo tenga en cuenta que no todos los navegadores son compatibles con estas unidades ... Primero verifique la compatibilidad del navegador: caniuse.com/#feat=viewport-units

— dBlaze