Styling HTML и BODY селектор высоты: 100%; против 100vh

Мы с братом возились в возвышенности раньше, и он вдруг крикнул: "Я узнал что-то новое!"

Немного потрясенный, я спросил: "Что это...?"

Он ответил: "Высота видового экрана! Я начал с I.E.6, когда он не был полностью поддержан и никогда не смотрел на него снова". Затем он продолжил показывать мне.

На что я ответил: "Я совершил то же самое здесь". и показал ему еще один проект песочницы, с которым я столкнулся.

В моем проекте, в CSS, я написал

(редактирование: я отредактировал, чтобы поместить цвет фона в div, а не в html или тело, мою ошибку)

(jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/)

html, body {
    height: 100%;
}

div {
    height: 100%;
    background: green;
}

его код, (jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/)

div {
    height: 100vh;
    background: green;
}

Оба сделали практически то же самое. После того, как мы провели здесь некоторые исследования, кажется, что обычно с помощью первого метода обычно возникает невозможность прокрутки; однако в моем проекте sandbox у меня было больше контента, и я смог прокручивать и взаимодействовать с веб-сайтом в обычном режиме.

Ни один из нас не смог определить, каковы различия между обоими методами. Может ли кто-нибудь здесь научить нас?

Спасибо!

Ответы

Ответ 1

height: 100vh= 100% высоты окна просмотра

height: 100%= 100% высоты родительского элемента

Вот почему вам нужно добавить height: 100% в html и body, поскольку по умолчанию они не имеют размера

Что-то, что вам нужно знать: если вы используете% для вертикального поля или заполнения,% будет вычисляться по ширине родительского элемента, а не по высоте.

Совет: попробуйте использовать vh и vw для размера шрифта:) Мне нравится этот (не поддерживается в некоторых браузерах, которые я знаю): font-size: calc(.5vh + .5vw); (например)

См. хорошую страницу здесь для единиц CSS: http://css-tricks.com/the-lengths-of-css/

Ответ 2

высота: 100vh = 100% высоты просмотра

Технически это правда, но лучший способ подумать - это 100% от доступной высоты.

Если вы хотите заполнить div с доступной высотой, это может быть полезным полезным трюком. Прежде чем я узнал об этом, я должен был бы обеспечить, чтобы каждый div от html до вложенного div имел высоту 100%, которая может быть утомительной и подверженной ошибкам. Вместо этого теперь я использую только высоту: 100vh на вложенном элементе.

См. Этот gist.run для примера с Bootstrap 4.1:

Ответ 3

Единицы представления порта = vw, vh, vmin и vmax - основаны на размере окна просмотра браузера. Поскольку их фактический размер изменяется в зависимости от размера области просмотра, это делает их отличными единицами для адаптивного дизайна

Примечание: При работе с шириной, то блок% больше подходит, но с высотой, блок В.Х. лучше.

ширина области просмотра будет на самом деле больше, чем ширина элемента html.

Окно просмотра> html> body