In my website I have two main divs
- one for the banner at the top, and one for the main content. They both contain inner elements like imgs
, iframes
etc. but I don't think this is important for my problem which is: how can I make the scroll bar for the main content not overlap the banner?
If it helps, you can view the source for my actual website on my github. But to save wasting time looking, I've wrote a small snippet in html
which demonstrates this issue:
document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(15);
html, body {
margin: 0;
padding: 0;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
postion: absolute;
top: 100px;
}
<body>
<div id="header">
header
</div>
<div id="main">
<pre id="someText"></pre>
</div>
</body>
It may be hard to see, in the snippet here on SO
but the scroll bar
on the right overlaps the banner and I what I want is for it to stop when it reaches the banner.
I have tried (in the CSS
) setting the overflow
of the body to hidden
as this is the scroll bar
overlapping the banner, but this just removes it entirely so I can't scroll - so clearly not what I am looking for...
I have also tried setting the overflow-y
of the main
div
to scroll
, but this does not work as a bar
does appear where I want it, but it is grayed-out
so not usable.