Прокрутка содержимого с фиксированной позицией и указанным верхним свойством удаляет последнюю часть

Question

Пример: http://jsfiddle.net/3p9urx4y/ Я пытаюсь сделать мобильную навигацию, которая должна быть размещена под заголовком.Но если я указываю следующие свойства:

.list {
   top: 50px;
   overflow-y: scroll;
 }

Последние 50 пикселей содержимого отсутствуют, поскольку свойство top не равно нулю.Я пытался сделать внешний div с padding-top 50px, но в этом случае прокрутка появляется в области заголовка, и это не ожидаемое поведение.Мы могли бы указать margin-bottom последнего дочернего списка, и это помогает:

.item:last-child {
    margin-bottom: 50px;
}

Но это хитрость, и я пытаюсь найти лучшее решение.Я нашел этот вопрос Прокрутка части содержимого в контейнере с фиксированной позицией , но мне нужно что-то другое.Мой заголовок должен быть исправлен, и навигационное меню должно скользить с правой стороны, когда пользователь нажимает кнопку навигации.

Отредактировано: http://jsfiddle.net/3p9urx4y/ новый пример

Answer 1

Дайте заголовку фиксированную позицию, высоту и ширину, не забудьте дать ему z-индекс ... тогда ваша навигация под ним должна быть в порядке, я могу бросить больше предложений, если вы нуждаетесь во мне #веселит

Answer 2

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

Одно решение будетустановить высоту списка на calc(100vh - 50px).Я редактировал fiddle .

Функция calc позволяет выполнять вычисления при указании свойства css.Больше информации здесь .