There is a page template containing a navigation bar and content in separate blocks. When the page overflows, a scrollbar appears in the content that hits the navbar. The scrollbar itself is needed, but only inside the content, is it possible to display it after the navbar?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Asd</title>
</head>
<body>
<div class="navbar">
<!-- My navbar -->
</div>
<div class="content">
<!-- Content -->
</div>
</body>
</html>
3
Answers
If I understand correctly, you don’t want the scrollbar on the whole page, just inside the content right?
You could achieve this like that:
Hope it helps!
I think this is what you are after. Your nav stays the same height (yellow in my example) but the content inside the content class has a scroll bar if it has lots of content.
To scroll only an element you need to use
overflow:hiddenin the container andoverflow:autojust for the scrollable content, as @satyr has responded.to set the scollable element in a non scrollable full page you need to setup your html and body to cover the full page, as @cs.matyi has responded.
So a complex layout with both scrollable and fixed elements you need to combine both techniques, resulting something like this: