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

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

html, body {
   height: 100%;
}

или же

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

Что ж, это не основано на мнении, поскольку у каждого метода есть свои недостатки, поэтому какой способ рекомендуется использовать и почему?

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

html {
   height: 100%;
}

body {
   min-height: 100%;
}

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

Между прочим, причина, по которой вы должны указать heightand min-heightto 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 содержит все подробности, но это чрезвычайно запутанное чтение, поэтому вы можете пропустить его, если вас не интересует ничего, кроме того, что я объяснил здесь.

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

body {
    min-height: 100vh;
}

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