html - 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 内垂直滚动？

标签： htmlcssresponsive-design

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/