Skip to content

Instantly share code, notes, and snippets.

@jamesxv7

jamesxv7/stickyfooter.css

Created February 24, 2016 15:17
Show Gist options
  • Save jamesxv7/a5b4445d4951bd1bbf8b to your computer and use it in GitHub Desktop.
Save jamesxv7/a5b4445d4951bd1bbf8b to your computer and use it in GitHub Desktop.
Download ZIP
Sticky footer using CSS
Raw
stickyfooter.css
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -80px;
}
.wrapper:after {
content: "";
display: block;
height: 80px;
}
.header {
background-color: #CCC;
height: 80px;
width: 100%;
}
.header h1 {
margin: 0 auto;
width: 90%;
line-height: 80px;
}
h1 span {
font-size: .5em;
}
.content p {
margin: 20px auto;
width:80%;
}
.footer {
background-color: #AAA;
height: 80px;
width: 100%;
}
.footer p {
margin: 0 auto;
padding-top: 10px;
width: 90%;
}
@jamesxv7
Copy link
Author

Example HTML:

<body>
  <div class="wrapper">
    <div class="header">
      <h1>Header</h1>      
    </div>
    <div class="content"></div>
  </div>
  <div class="footer">
    <p>Footer area text goes here.</p>
  </div>
</body>

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