html min height 100

На чтение 3 мин. Опубликовано
Содержание
  1. Поддержка браузерами
  2. Описание
  3. Краткая информация
  4. Версии CSS
  5. Описание
  6. Синтаксис
  7. Значения
  8. Объектная модель
  9. Браузеры
  10. 2 Answers 2

Поддержка браузерами

12.0+ 7.0+ 3.0+ 1.0+ 4.0+ 2.0.2+

Описание

CSS свойство min-height устанавливает минимальную высоту области для содержимого элемента.

Примите во внимание, что минимальная высота элемента вычисляется по формуле:
min-height+padding(верхний и нижний)+border(ширина рамки)
т.е. если вы зададите min-height: 500px, padding: 5px, border 1px, то минимальная высота получится 512px.

Примечание: CSS свойство min-height работает только с блочными элементами.

Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0 8.0+ 1.0+ 4.0+ 2.0+ 1.0+ 2.1+ 2.0+

Краткая информация

Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам, кроме встроенных и таблиц
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height , max-height и min-height . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Высота элемента

Значения свойств Высота
min-height height > max-height min-height
min-height > height height min-height
min-height > max-height min-height
min-height height ) меньше значения min-height , то высота элемента принимается равной min-height .

Синтаксис

min-height: значение | проценты | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная высота блока равная 80 пикселам. Результат примера показан на рис. 1.

Рис. 1. Высота блока, заданная с помощью min-height

Объектная модель

[window.]document.getElementBy >elementID «).style.minHeight

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

While designing layouts I set the html, body elements’ height to 100% but in some cases, this fails, so what should be used?

Well, this is not opinion based as each method has its own flaws, so what’s the recommended way to go for and why?

2 Answers 2

If you’re trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:

My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):

Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.

The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn’t prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.

The second way, using min-height: 100% on both, doesn’t cause body to expand to the full height of html because min-height with a percentage doesn’t work on body unless html has an explicit height .

For the sake of completeness, section 10 of CSS2.1 contains all the details, but it’s an extremely convoluted read so you can skip it if you’re not interested in anything beyond what I’ve explained here.

Оцените статью