Pushing the footer at the bottom of my page with a margin at the top
Question
I often use the method of an empty div to make my footer stay at the bottom of my page. The code idea is following:
<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:
html, body {
height: 100%;
margin:auto;
}
#canevas {
min-height: 100%;
height: auto;
margin-bottom: -33px;
}
#footer, #push {
height: 33px;
}
Today I'm looking for how to add a margin-top on my #caneva div without breaking the footer. Do you have any idea?
Note that my page's content can have many different size (a lot less and a lot more than 100% of the screen height).
Here a fiddle with previous code.
2 answers
solution1
2 ACCPTED 2014-03-12 21:25:36
If using padding-top is an option, you could use box-sizing: border-box to calculate the width and height of the box including padding and border , as follows:
#canevas {
min-height: 100%;
margin-bottom: -33px;
padding-top: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Also it's worth noting that border-box value is supported on IE8+ .
Alternatively, you could add another spacer element as the first child of the #canevas element to push down the content, as follows:
.spacer {
height: 50px;
}
<body>
<div id="canevas">
<div class="spacer"></div>
<article>My website's content</article>
<div id="push"></div>
</div>
<footer id="footer">Here my footer</footer>
</body>
This will have a promising browser support :)
For further info, you could refer my answer on a similar question on SO here:
solution2
0 2014-03-12 21:22:40
If what you mean is to keep the height of the page, then the answer is to also add margin-bottom: -63px; to your #caneva div . This way basically only the top of the '#caneva div' will change, the rest of the page will remain the same.
I created an updated fiddle here for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.