разница между высотой CSS: 100% против высоты: авто

167

В одном из интервью мне был задан вопрос: "Какая разница между CSS height:100%и height:auto?"

Кто-нибудь может объяснить?

css

— Gowsikan
источник

236

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

— Маниш Мишра
источник

5

Я думаю, что в случае 'height: auto #innerDiv будет 10px + the size it needs for its own content- см. Это jsfiddle

— BornToCode

@Manish Мишра: Какой дизайн лучше всего реагирует? Задать высоту дочернего элемента или элемента контейнера и позволить другому определить его высоту?

— Джон Струд

@ Джека, все зависит от того, какой внешний вид, поведение и поведение вы ожидаете от своего дизайна на разных экранах, и, соответственно, вы пишете свой CSS. Не существует такого общего глобального правила как setting the height of the child element or the container element. Вы можете делать все, что вам нужно, для достижения вашего дизайна, при условии, что вы следуете определенной последовательности, избегая дублирования, сокращая повторную работу, группируя общие макеты. Короче говоря, в вашей работе должна быть система / шаблон, чтобы ее можно было легко читать и изменять, и, конечно, тот факт, что она работает,

— Маниш Мишра

2

Я думаю, что хороший способ думать об авто - это то, что вы «сбрасываете» высоту - это все равно, что не устанавливать ее.

— niico

1

Я изменил скрипку, которую BornToCode поделился выше, чтобы сделать ее более очевидной, что autoзаставляет элемент расти в соответствии с его содержимым и дочерним содержимым. Напротив, значение фиксированной высоты не увеличивает (или не показывает) содержимое, которое не может поместиться в пределах заявленной высоты. jsfiddle.net/m3f8y6xr/1 Я полагаю, что этот ответ недостаточно сформулирован, чтобы сделать очевидным, что этот элемент будет расти и включать в себя весь контент, будь то собственный текст или дочерний контент. Конечно, можно утверждать, что его собственный текст тоже ребенок. Это обеспечивает визуальное подтверждение поведения.

— SherylHohman

5

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

— Рохит Азад
источник

3

Это не обязательно правильно, если родительский элемент имеет элемент с определенной высотой, которая не соответствует размеру окна браузера

— goonerify

1

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

— Вахид Гейдаринежад
источник

0

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

— Chukwuemeka
источник