Skip to content

Instantly share code, notes, and snippets.

@nguyenj

nguyenj/index.html

Last active August 29, 2015 14:04
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 nguyenj/cf91b07019f00c8ff18f to your computer and use it in GitHub Desktop.
Save nguyenj/cf91b07019f00c8ff18f to your computer and use it in GitHub Desktop.
Download ZIP
Base page markup
Raw
index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sticky Footers</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="page">
<header class="site-header" role="banner"></header>
<main class="site-main" role="main"></main>
<footer class="site-footer" role="contentinfo"></footer>
</div>
</body>
</html>
Raw
style.css
html,
body {
min-height: 100%;
height: 100%;
}
.page {
min-height: 100%;
position: relative;
}
.site-main {
padding-bottom: 3em; /* must be equal to the overall height of the #footer */
}
.site-footer {
height: 3em;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment