Skip to content

Instantly share code, notes, and snippets.

@maehler

maehler/sticky.css

Last active December 17, 2015 14:39
Show Gist options
  • Save maehler/5625809 to your computer and use it in GitHub Desktop.
Save maehler/5625809 to your computer and use it in GitHub Desktop.
Download ZIP
A simple setup for a sticky footer (http://ryanfait.com/sticky-footer/) using the unsemantic CSS framwork (http://unsemantic.com/).
Raw
sticky.css
html, body { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
.grid-container {
height: 100%;
}
.grid-container > footer, .wrapper > .push {
height: 50px;
clear: both;
}
Raw
sticky.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>unsemantic sticky footer</title>
<style>
* { margin: 0; }
</style>
<link rel="stylesheet" href="unsemantic-grid-base-tablet.css">
<link rel="stylesheet" href="sticky.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid-container">
<div class="wrapper">
<header class="grid-100">
<h1>unsemantic sticky footer</h1>
<code>&lt;header&gt;</code>
</header>
<div class="grid-10 suffix-90">
<p>This is a sticky footer for the unsemantic CSS framework</p>
</div>
<div class="push"></div>
</div>
<footer class="grid-100 align-center">
<p>Niklas Mähler 2013</p>
<code>&lt;footer&gt;</code>
</footer>
</div>
</body>
</html>
Raw
style.css
.align-center { text-align: center; }
.wrapper > header, .grid-container > footer { background-color: gray; }
.grid-container {
border-left: 1px solid black;
border-right: 1px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment