висота: 100% або мінімальна висота: 100% для html та елементів кузова?

При розробці макетів я встановлюю для html, bodyелементів ' heightзначення, 100%але в деяких випадках це не вдається, то що слід використовувати?

html, body {
   height: 100%;
}

або

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

Ну, це не засновано на думках, оскільки кожен метод має свої недоліки, тож який рекомендований спосіб піти і чому?

Якщо ви намагаєтеся застосувати фонові зображення 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 містить усі подробиці, але це надзвичайно заплутане читання, тому ви можете пропустити його, якщо вас не цікавить щось, окрім того, що я тут пояснив.

Ви можете використовувати vhодиницю виміру висоти вікна перегляду ( ):

body {
    min-height: 100vh;
}

Це відносно екрану, а не батьківської висоти, тому вам не потрібна висота html: 100%.