Skip to content

Instantly share code, notes, and snippets.

@joshweinstein

joshweinstein/index.html

Created May 11, 2012 16:35
Show Gist options
  • Save joshweinstein/2660814 to your computer and use it in GitHub Desktop.
Save joshweinstein/2660814 to your computer and use it in GitHub Desktop.
Download ZIP
100% height with header and footer
Raw
index.html
<!doctype html>
<head>
<style>
/**
* 100% height layout with header and footer
* ----------------------------------------------
* from http://peterned.home.xs4all.nl/examples/csslayout1.html
*/
html, body {
margin: 0;
padding: 0;
height: 100%; /* needed for #main min-height */
}
header {
background-color: blue;
position: fixed;
left: 0;
right: 0;
height: 2em;
z-index: 2;
}
#sidebar {
top: 2em; /* Clear header */
background-color: indigo;
height: 100%;
position: fixed;
width: 2em;
}
#wrapper {
top: 2em; /* Clear header */
left: 2em; /* Clear sidebar */
bottom: 0;
position: absolute;
background-color: pink;
}
#main {
background-color: grey;
position: relative; /* needed for footer positioning*/
height: 100%; /* IE6: treated as min-height*/
height: auto !important; /* real browsers */
min-height: 100%; /* real browsers */
}
#content {
background-color: yellow;
padding-bottom: 30px; /* Clear footer */
}
#footer {
background-color: red;
border-top: 8px solid green;
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<header>Header</header>
<nav id="sidebar">[SN]</nav>
<div id="wrapper">
<div id="main">
<div id="content">Content<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer">footer</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment