diferencia entre altura css: 100% vs altura: automático

Resuelto Gowsikan asked hace 11 años • 4 respuestas

En una entrevista me hicieron la pregunta "¿cuál es la diferencia entre CSS height:100%y height:auto?"

¿Alguien puede explicarlo?

Gowsikan avatar Apr 11 '13 14:04 Gowsikan
Aceptado

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

height: autosignifica 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>

#innerDivva 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>

#innerDivva a tenerheight: 10px

Manish Mishra avatar Apr 11 '2013 07:04 Manish Mishra

altura: 100% funciona si el contenedor principal tiene una propiedad de altura especificada; de lo contrario, no funcionará

Chukwuemeka avatar Sep 27 '2019 21:09 Chukwuemeka

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 autoaltura será la altura mínima necesaria para contener .

Rohit Azad Malik avatar Apr 11 '2013 07:04 Rohit Azad Malik