diferencia entre css height: 100% vs height: auto

167

Me hicieron una pregunta en una entrevista que "¿cuál es la diferencia entre el CSS height:100%y height:auto?"

¿Alguien puede explicar?

css Gowsikan
fuente

Respuestas:

236

height: 100% da al elemento el 100% de la altura de su contenedor principal.

height: auto significa que la altura del elemento dependerá de la altura de sus hijos.

Considere estos ejemplos:

altura: 100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv va a tener height: 50px

altura: auto

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv va a tener height: 10px

Manish Mishra
fuente
55
Creo que en el caso de 'height: auto #innerDiv será 10px + the size it needs for its own content- vea este jsfiddle
BornToCode
@Manish Mishra: ¿Cuál es el mejor diseño receptivo? ¿Establecer la altura del elemento secundario o del elemento contenedor y dejar que el otro obtenga su altura?
John Strood
@Djack, todo depende de la apariencia, la sensación y el comportamiento que esperas de tu diseño en varias pantallas y, en consecuencia, escribes tu CSS. No existe una regla global genérica como setting the height of the child element or the container element. Puede hacer lo que sea necesario para lograr su diseño, siempre que siga cierta coherencia, evite la duplicación, reduzca el reproceso y agrupe diseños comunes. En resumen, debe haber un sistema / patrón para su trabajo, de modo que sea fácil de leer y modificar, y por supuesto el hecho de que debe funcionar
Manish Mishra
2
Creo que una buena forma de pensar sobre el auto es que estás `` inquietando '' la altura, es como no tenerlo configurado.
niico
1
Modifiqué el violín que BornToCode compartió anteriormente, para que sea más obvio que autohace que el elemento crezca para acomodar AMBOS su contenido Y el contenido de su hijo. Por el contrario, un valor de Altura fija no aumenta (ni muestra) el contenido que no puede caber dentro de la altura declarada. jsfiddle.net/m3f8y6xr/1 Creo que esta respuesta no está lo suficientemente redactada como para hacer ver que el elemento crecerá para incluir todo el contenido, ya sea su propio texto o el contenido de un niño. Por supuesto, se puede argumentar que su propio texto también es un niño. Esto proporciona confirmación visual del comportamiento.
SherylHohman
5

Una altura del 100% para es, presumiblemente, la altura de la ventana interna de su navegador , porque esa es la altura de su padre , la página. Una autoaltura será la altura mínima del necesario contener .

Rohit Azad
fuente
3
Esto no es necesariamente correcto si el elemento padre es uno con una altura definida que no se ajusta al tamaño de la ventana del navegador
goonerify
1

El valor predeterminado está height: autoen el navegador, pero height: X%define la altura en porcentaje del bloque contenedor.

Vahid Heydarinezhad
fuente
0

height: 100% funciona si el contenedor principal tiene una propiedad de altura especificada más, no funcionará

Chukwuemeka
fuente