Skip to content

Instantly share code, notes, and snippets.

@anthonybrown

anthonybrown/index.html

Last active August 29, 2015 14:19
Show Gist options
  • Save anthonybrown/a29a78b67e88000c9516 to your computer and use it in GitHub Desktop.
Save anthonybrown/a29a78b67e88000c9516 to your computer and use it in GitHub Desktop.
Download ZIP
My Sticky Footer using CSS, first file is using absolute which I don't like to use but in a pinch it fast to implement. The other stylesheet I use a negative margin on a wrap element.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div id='wrap'>
<header>
<div class='container'>
<nav>
<ul class="main-nav">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
</ul>
</nav>
<h1>This is all of JavaScript</h1>
<p>The Good, the bad, and the ugly.</p>
</div>
</header>
<section id="main">
<div class="container">
<h1>Main Section</h1>
<div id="output"></div>
</div>
</section>
</div>
<footer>
<div class='container'>
<p>Copyright....there ain't no stinking copyright.</p>
</div>
</footer>
<script src='../assets/js/app.js'></script>
</body>
</html>
@anthonybrown
Copy link
Author

There are many versions of the sticky footer solution. These are the two that I put to memory, well if I forget they are here for me to review.
The colors are just to show you exactly what the elements look like and where they are in the document.

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