VW и VH единицы не являются точными
width: 100vw;/* 100% of viewport width */
height: 100vh;/* 100% of viewport height*/
Этот CSS должен дать мне точные (100%) размеры области просмотра. Но он, очевидно, слишком велик, потому что вызывает переполнение на странице.
Это не отступы, поля или контур, потому что я все это удалил.
Примечание. Также кажется, что он "растет" больше, чем спроецированные измерения, когда я добавляю два деления с этими измерениями. (но это всегда так в jsfiddle)
Должен ли я просто считать это ошибкой и написать обходной путь? Или я что-то упустил?
2 ответа
Измерения в окне просмотра точны. Проблема заключается в том, что ваш div является встроенным блоком. Браузер отображает ваш элемент inline-block в линейном блоке. Пустое пространство под вашим div происходит от базовой линии этого прямоугольника; это область, где должны идти типографские спуски. Это дополнительное пространство, в сочетании с вашим div, приводит к переполнению.
Если вы удалите display: inline-block объявление так, что ваш div отображается как элемент уровня блока, полосы прокрутки исчезнут, и div будет точно соответствовать области просмотра.
Если вам нужно, чтобы этот элемент по какой-то причине был встроенным блоком, установите vertical-align: top (или же bottom или же middleКажется, это исправить.
Есть еще один способ решить эту проблему
Вы должны установить line-height всего тела в vh