Skip to content

Instantly share code, notes, and snippets.

@benjiwheeler

benjiwheeler/layout_boilerplate.html

Last active January 21, 2021 17:45
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 benjiwheeler/481d02eccfd7361299d172fc6db303ac to your computer and use it in GitHub Desktop.
Save benjiwheeler/481d02eccfd7361299d172fc6db303ac to your computer and use it in GitHub Desktop.
Download ZIP
HTML, CSS layout boilerplate with header, footer, responsive content width; source https://jsbin.com/tocuguw
Raw
layout_boilerplate.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-git.js"></script>
<script language="JavaScript">
$( document ).ready(function() {
$("#add").on("click", function() {
$("<p>Content here</p><p>Content here</p>").appendTo(".content");
});
});
</script>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.page {
min-height: 100%;
margin-bottom: -100px;
}
.page:after {
content: "";
display: block;
height: 100px;
}
.header-wrapper {
background-color: #e4e;
width: 100%;
height: 100px;
}
.header-content {
background-color: #f5f;
width: calc(100% - 2rem);
padding: 1rem;
}
.main {
background-color: #4e4;
width: 100%;
min-height: calc(100vh - 200px);
}
.content {
background-color: #e44;
width: 90vw;
max-width: 50rem;
margin: 0 auto;
}
.footer-wrapper {
background-color: #e4e;
width: 100%;
height: 100px;
}
.footer-content {
background-color: #f5f;
width: calc(100% - 2rem);
padding: 1rem;
}
</style>
</head>
<body>
<div class="page">
<div class="header-wrapper">
<div class="header-content">
<p>Header here
</div>
</div>
<div class="main">
<div class="content">
<p>Sticky Footer</p>
<p>with Fixed Footer Height</p>
<button id="add">Add Content</button>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="footer-content">
I'm the Sticky Footer.
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment