Разница между css height: 100% vs height: auto

Ответ 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

Ответ 2

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

Ответ 3

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

Ответ 4

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