CODEWITHSUNDEEP
htmlcssresponsive-design
YogaPanda
YogaPanda

Reputation: 328

Vertical scroll inside a div?

I have a mobile site with masthead and burger menu at the top. The HTML is like below:

<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>

The #cssmenu has fixed position. So when users scroll down the page, the title and content actually scroll underneath the masthead and cause some issues for on-page anchors. Is there a way to allow the #wrap only vertically scroll within its own div?

Upvotes: 0

Views: 42

Answers (1)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

You could fix your #wrap container as well.

#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>

fiddle

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

You could also use fixed height based on viewport height.

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>

fiddle

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

Upvotes: 2

Related Questions