Высота: 100% VS min-height: 100%

Я использую этот css для установки <div> максимальной высоты

Может ли кто-нибудь дать мне общий ответ, какая разница между height: 100% и min-height: 100%?

ОТВЕТЫ

Ответ 1

Здесь объяснение из W3C (ссылка):

Следующий алгоритм описывает, как два свойства [min-height и max-height] влияют на использованное значение свойства height:
Ориентировочная используемая высота вычисляется (без "min-height" и "max-height" ), следуя правилам в разделе "Вычисление высоты и полей" выше.
Если эта предварительная высота больше, чем "max-height" , приведенные выше правила применяются снова, но на этот раз используют значение "max-height" в качестве вычисленного значения для "height".
Если результирующая высота меньше, чем "min-height" , приведенные выше правила применяются снова, но на этот раз с использованием значения "min-height" в качестве вычисленного значения для "height".

Подводя итог: В принципе, если минимальная высота больше, чем высота в противном случае (будь то явная высота задана или нет), то минимальная высота используется как высота, Если минимальная высота меньше, чем высота в противном случае, то минимальная высота не имеет эффекта.

Для конкретного случая, который вы указываете, с указанием height:100% делает высоту элемента равным высоте содержащего блока. (Однако это потенциально может быть отменено, например, если вы также указали max-height:50%.) Указание min-height:100% означает, что если вычисленная высота меньше 100%, на самом деле, даже если вы явно указали высоту менее 100%, это обрабатывается так, как если бы вы сказали height:100%. Обратите внимание, что одно ключевое различие заключается в том, что максимальная высота может превышать высоту, но не может отменить минимальную высоту (поскольку максимальная высота учитывается после высоты, но до минимальной высоты в соответствии с рекомендацией W3C, как указано выше).

Ответ 2

height: 100% будет идти до 100% высоты контейнера; min-height: 100% должен превышать высоту контейнера, если это необходимо.

Имейте в виду, что min-height не поддерживается в IE.

Ответ 3

Единственное практическое использование, которое я видел в min-height, - это придерживаться нижнего колонтитула в нижней части страницы. Рассмотрим следующий код:

<html>
  <head></head>
  <body style="height: 100%">
    <div style="height: 100%">
      <div style="height: auto; min-height: 100%; background-color: blue;">
        <div class="main" style="padding-bottom: 300px;">
        </div>
      </div>
      <div class="footer" style="height: 300px; background-color: red; margin-top: -300px;"></div>
    </div>
  </body>
</html>

Красный застрял в нижней части порта представления, когда главный div пуст, и когда вы заполняете основной div содержимым, красный нижний колонтитул по-прежнему остается в нижней части страницы.

Чтобы проиллюстрировать эту точку, если вы просто используете высоту: 100% на основном div и заполняете ее содержимым, красный нижний колонтитул будет парить в нижней части окна просмотра. Высота, указанная как 100%, не расширяет главный div за пределами области просмотра, как если бы вы объявили высоту: auto; мин-высота: 100%.

Ответ 4

height добавит ваш элемент к размеру 100% его контейнера.

min-height помещает элемент в min 100% от размера контейнера

но зачем вам это делать? если min-height составляет 100%, это не будет иметь никакого эффекта на мой взгляд...

после некоторых исследований в IE7 он может дать вам решение проблемы:

http://www.search-this.com/2007/02/05/css-min-height-explained/