высота: 100% против минимальной высоты: 100% - PullRequest
Новая
       6

высота: 100% против минимальной высоты: 100%

29 голосов
/ 26 февраля 2010

Я использую это css , чтобы установить <div> на максимальную высоту

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

Ответы [ 4 ]

26 голосов
/ 26 февраля 2010

Вот объяснение от 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, как указано выше).

14 голосов
/ 26 февраля 2010

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

Имейте в виду, что минимальная высота не поддерживается в IE.

7 голосов
/ 26 февраля 2010

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

<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>

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

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

1 голос
/ 26 февраля 2010
Высота

поместит ваш элемент на 100% размера его контейнера.

min-height поместит элемент на минимум 100% размера контейнера

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

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

http://www.search -this.com / 2007/02/05 / KSS-мин-высота объясненном /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...