diferencia entre css altura: 100% vs altura: auto

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

¿Alguien puede explicarlo?

 123
css
Author: bash.d, 2013-04-11
Source

3 answers

height:100% implica que el elemento va a tener la altura del 100% de su contenedor padre.

height:auto significa que el elemento tendrá una altura flexible, es decir, su altura dependerá de la altura de los elementos secundarios de la misma

Considere el siguiente ejemplo:

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>

Ahora el #innerDiv va a tener height:10px

 185
Author: Manish Mishra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-11 07:37:32

Una altura de 100% para es, presumiblemente, la altura de la ventana interna de su navegador, porque esa es la altura de su padre, la página. An auto height será la altura mínimade necesaria para contener.

 4
Author: Rohit Azad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-11 08:04:01

El valor predeterminado es height: auto en el navegador, pero height: X% Define la altura en porcentaje del bloque que contiene.

 0
Author: vahid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-30 14:48:56