разница между css высота: 100% vs высота: авто

Question

Меня спрашивали в интервью, что «в чем разница между css height:100% и height:auto?»

Может ли кто-нибудь объяснить?

Answer 1

height:100% подразумевает, что элемент будет иметь высоту 100% своего родительского контейнера.

height:auto средства, то элемент будет иметь гибкую высоту т.е. его высота будет зависеть от высоты дочерних элементов от него

Рассмотрим пример ниже:

высота: 100%

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

#innerDiv будет иметь height:50px

высота: авто

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

теперь #innerDiv будет иметь height:10px

Answer 2

высота 100% для является, по-видимому, высота внутреннего окна Вашего браузера , потому что это высота его родителя, страницы. A auto высота будет минимальная высотанеобходимо содержать.

Answer 3

по умолчанию является height: auto в браузере, но height: X% Определяет высоту в процентах от содержащего блока.