Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example of Overscroll
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sticky Footer Example</title>
<style>
* {
margin: 0;
}
html {
font-family: sans-serif;
}
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
margin-bottom: -30px;
background-color: white;
text-align: center;
}
.page-wrap::after {
content: '';
display: block;
}
header {
background-color: #373737;
}
header h1 {
margin: 0 auto;
padding: 10px 0;
text-align: center;
text-transform: uppercase;
color: white;
}
footer {
height: 30px;
text-align: center;
background-color: #373737;
}
footer p {
padding: 5px;
color: white;
}
/* The background stuff */
html {
background-color: #373737;
}
</style>
</head>
<body>
<div class="page-wrap">
<header>
<h1>Intro</h1>
</header>
<h1>This site is for testing!</h1>
<p>Please enjoy the test.</p>
</div>
<footer>
<p>No Copyright...cause that's cool.</p>
</footer>
</body>
</html>
@fulldecent

This comment has been minimized.

Copy link

@fulldecent fulldecent commented Sep 20, 2020

It is possible to use different colors for top and bottom over scroll?

@peterramsing

This comment has been minimized.

Copy link
Owner Author

@peterramsing peterramsing commented Nov 1, 2020

It is possible to use different colors for top and bottom over scroll?

@fulldecent, if you use a gradient as the background color you could get it to work.

@fulldecent

This comment has been minimized.

Copy link

@fulldecent fulldecent commented Nov 1, 2020

Perfect, thank you

@NatYing

This comment has been minimized.

Copy link

@NatYing NatYing commented Dec 9, 2020

I would like the change the html background color of the website I created using Wix. I tried adding what you had in your example but doesn't seem to work. Do you know that is the exact custom code that I should add if I use Wix to create my website, please? Thanks much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment