diferença entre a altura css: 100% vs altura: auto

Foi - me feita uma pergunta numa entrevista que "Qual é a diferença entre o css {[[0]} e height:auto?"

Alguém pode explicar?

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

3 answers

height:100% implica que o elemento vai ter a altura de 100% do seu recipiente original.

height:auto significa que o elemento terá uma altura flexível, ou seja, a sua altura dependerá da altura das crianças.

Considere abaixo o exemplo:

Altura:100%

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

#innerDiv vai ter height:50px

Altura:auto

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

Agora o #innerDiv vai ter height:10px

 185
Author: Manish Mishra, 2013-04-11 07:37:32

A altura de 100% para é, presumivelmente, a altura da janela interna do seu Navegador, porque essa é a Altura do seu pai, a página. An auto a altura será aaltura mínima denecessária para conter .

 4
Author: Rohit Azad, 2013-04-11 08:04:01

O valor por omissão é height: auto no navegador, mas height: X% define a altura em percentagem do bloco que contém.

 0
Author: vahid, 2016-01-30 14:48:56