Skip to content

Instantly share code, notes, and snippets.

@Archie22is

Archie22is/FooterPolitics.html

Created July 11, 2019 07:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Archie22is/450c0aef7f4c633f7d97a9646493e42d to your computer and use it in GitHub Desktop.
Save Archie22is/450c0aef7f4c633f7d97a9646493e42d to your computer and use it in GitHub Desktop.
Download ZIP
How to keep your footer where it belongs 👣 . – by Dominic Fraser
Raw
FooterPolitics.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
<style>
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment