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

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

html, body {
   height: 100%;
}

или 

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

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

2 69
html css

2 ответа:

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

160

вы можете использовать высоту видового экрана (vh) единица измерения:

body {
    min-height: 100vh;
}
0