One technique I frequently use to ensure my footer stays at the bottom of my page is by utilizing an empty div. Here's how the code looks:
<body>
<div id="canevas">
<article>My website's content</article>
<div id="push"></div>
</div>
<footer id="footer">Here my footer</footer>
</body>
The CSS required for this setup is as follows:
html, body {
height: 100%;
margin:auto;
}
#canevas {
min-height: 100%;
height: auto;
margin-bottom: -33px;
}
#footer, #push {
height: 33px;
}
Today, I am trying to figure out a way to add a margin-top on the #caneva div without disrupting the placement of the footer. Any suggestions?
It's worth noting that the content on my page can vary greatly in size (both smaller and larger than 100% of the screen height).
For reference, you can view a fiddle with the aforementioned code.