diferencia entre altura css: 100% vs altura: automático
En una entrevista me hicieron la pregunta "¿cuál es la diferencia entre CSS height:100%
y height:auto
?"
¿Alguien puede explicarlo?
Aceptado
height: 100%
le 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 tenerheight: 50px
altura: automático
<div style="height: 50px">
<div id="innerDiv" style="height: auto">
<div id="evenInner" style="height: 10px">
</div>
</div>
</div>
#innerDiv
va a tenerheight: 10px
altura: 100% funciona si el contenedor principal tiene una propiedad de altura especificada; de lo contrario, no funcionará
Una altura de 100% es, presumiblemente, la altura de la ventana interna de su navegador , porque esa es la altura de su padre , la página. Una auto
altura será la altura mínima necesaria para contener .