Высота: 100% или минимальная высота: 100% для элементов html и body?

При разработке макетов я устанавливаю html, body элементы height на 100%, но в некоторых случаях это не удается, поэтому что нужно использовать?

html, body {
   height: 100%;
}

или

html, body {
   min-height: 100%;
}

Ну, это не мнение, основанное на том, что каждый метод имеет свои собственные недостатки, так что рекомендуемый способ пойти и почему?

Ответы

Ответ 1

Если вы пытаетесь применить фоновые изображения к html и body, которые не заполняют все окно браузера, то нет. Используйте это вместо:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

Мое рассуждение дано здесь (где я подробно объясняю, как применять фоны таким образом):

Кстати, причина, по которой вам нужно указывать height и min-height на html и body соответственно, это потому, что ни один элемент не имеет внутренней высоты. Оба по умолчанию height: auto. Он имеет высоту 100%, поэтому height: 100% берется из окна просмотра, а затем применяется к body как минимум, чтобы разрешить прокрутку содержимого.

Первый способ, используя height: 100% для обоих, предотвращает расширение body с его содержимым, когда они начинают расти за пределы высоты просмотра. Технически это не препятствует прокручиванию содержимого, но это приводит к тому, что body оставляет пробел под складкой, что обычно нежелательно.

Второй способ, используя min-height: 100% для обоих, не приводит к тому, что body расширяется до полной высоты html, потому что min-height с процентом не работает на body, если html имеет явный height.

Для полноты, раздел 10 из CSS2.1 содержит все детали, но это чрезвычайно запутанное чтение, чтобы вы могли пропустить его если вас не интересует ничего, кроме того, что я здесь объяснил.

Ответ 2

Вы можете использовать высоту vh просмотра (vh):

body {
    min-height: 100vh;
}

Относительно экрана, а не родительской высоты, поэтому вам не нужна высота HTML: 100%.