Я использую этот css для установки <div> максимальной высоты
Может ли кто-нибудь дать мне общий ответ, какая разница между height: 100% и min-height: 100%?
Высота: 100% VS 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/