Почему не работает height 100vh?

Question

[Андрей Никифоров]

Добрый день, очень удивился что если сместить контейнер вниз через absolute/fixed, у которого указан скролл - нижние элементы "не входят" в скролл

https://i.imgur.com/mWsIH8j.png даже если указать height: calc(100vh + размер отступа);

https://codepen.io/true404/pen/WNaYQOJ

Почему так и как решить с помощью css ?

Answer 1

[Егор Живагин]

Сделать высоту height: calc(100vh - размер отступа) - заменить плюс на минус

Вам же высота нужна меньше вьюпорта, а не больше

Comments

[Егор Живагин]

А в остальном, не очень понял ваше удивление

Скролл появляется, когда контент не помещается в блоке
У вашего блока высота 100vh
vh работает просто - если высота вьюпорта, условно, 500 пикселей, height: 100vh - то же самое, что height: 500px
Экран 500 пикселей, блок по высоте тоже 500, но сдвинуть на 200px вниз. Конечно он выйдет за пределы экрана