What I’m trying to do is have a div that is directly in the body extend beyond the viewport when I overscroll downwards. Right now, when I scroll down at the bottom of the page, the content kind of "overscrolls" revealing the body’s background. I want the div’s background to be visible there.
I searched for a solution for hours, but couldn’t find anything so I tried setting the margin-bottom to a negative value, but to no avail.
Here’s the code with sample text and with a style tag instead of a seperate stylesheet file:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: red;
}
.content {
margin: 2% 10%;
margin-bottom: -1000px;
padding: 5% 5%;
background-color: #404040;
color: lightgrey;
overflow: visible;
}
</style>
</head>
<body>
<div class="content">
<p>Content</p>
<p>spanning</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>many</p>
<p>lines</p>
</div>
</body>
</html>(I wrote "many" so many times so you can scroll it)
2
Answers
First, you need to remove the body’s default margin and then explicitly provide div a margin on each side like this
and in your case, you don’t need the overflow in the div as you want your body to scroll here is the updated code.
Hopefully, it will fix your issue.
There are a couple of easy options, the first is to use a pseudo-element to carry the background-colour (or background-image) as below:
JS Fiddle demo.
Alternatively, we could use CSS custom properties and simply apply a background-gradient to the
<body>element:JS Fiddle demo.