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/