Вертикальная прокрутка внутри div?

Question

У меня есть мобильный сайт с топ-страницей и меню бургеров вверху.HTML выглядит следующим образом:

<div id="container">
   <div id="cssmenu">...</div> // this is the collapsed burger menu with masthead
   <div id="wrap">
      <div id="title">...</div> // page title
      <div id="content">...</div> // paragraph
   </div>
</div>

#cssmenu имеет фиксированную позицию.Поэтому, когда пользователи прокручивают страницу вниз, заголовок и содержимое фактически прокручивают под заголовком и вызывают некоторые проблемы для привязок на странице.Есть ли способ разрешить #wrap только вертикальную прокрутку внутри своего div?

Answer 1

Вы также можете исправить свой контейнер #wrap.

#cssmenu {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 30px;
  background-color: hsla(0, 0%, 0%, 0.1);
}
#wrap {
  position: fixed;
  top: 30px; right: 0; bottom: 0; left: 0;
  overflow-y: scroll;
}
#title,
#content {
  height: 600px;
}

<div id="container">
   <div id="cssmenu">menu</div>
   <div id="wrap">
      <div id="title">top of title</div>
      <div id="content">top of content</div>
   </div>
</div>

скрипка

https://jsfiddle.net/Hastig/e2qb9hu7/

---

Вы также можете использовать фиксированную высоту на основена высоте области просмотра.

body {
  height: 100vh;
  margin: 0;
}
#cssmenu {
  height: 10vh;
  background-color: hsla(0, 0%, 0%, 0.1);
}
#wrap {
  height: 90vh;
  overflow-y: scroll;
}
#title,
#content {
  height: 600px;
}

<div id="container">
   <div id="cssmenu">menu</div>
   <div id="wrap">
      <div id="title">top of title</div>
      <div id="content">top of content</div>
   </div>
</div>

скрипка

https://jsfiddle.net/Hastig/4rd1f9vt/