CSS 100vh смещен по заголовку ⇐ CSS

[Anonymous]

У меня есть эта ручка: https://codepen.io/anon/pen/wPdrod

Как видите (по крайней мере, в Chrome и Firefox), есть 2 вертикальные полосы прокрутки. Должен быть только внутренний, так как заголовок должен оставаться статическим.

Это вызывает CSS:

Код: Выделить всё

#app
{
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100vh;
}

Особенно высота 100vh. Это приводит к тому, что область просмотра становится слишком высокой на 36 пикселей. Это высота заголовка. Если да:

Код: Выделить всё

#app
{
...
height: calc(100vh - 36px);
}

Тогда все работает отлично. Я пытаюсь понять, почему мне нужно это сделать в первую очередь. А как насчет этого макета, из-за которого 100vh учитывает высоту заголовка? Я чувствую, что мне не нужно делать этот расчет, поскольку заголовок находится внутри элемента div макета вместе с остальными элементами.

Подробнее здесь: https://stackoverflow.com/questions/472 ... -by-header