When I use position relative with no content, footer goes up, with absolute with a lot of content, the footer goes down, and with fixed it is always there.
Is there a easy way to get at the end of the page independently of the content, shrinks and grows with content?
When there is a lot of content we can see the footer in the first page, and when there is few content we will see at the bottom.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
header {
position:fixed;
top:0;
width:100%;
height:40px;
background-color:#333;
padding:20px;
}
footer {
background-color: #333;
width: 100%;
bottom: 0;
position: relative;
}
#main{
padding-top:100px;
text-align:center;
}
</style>
</head>
<body>
<header>
header
</header>
<div id="main">
main
</div>
<footer>
footer
</footer>
</body>
</html>
This question is related to
html
css
coding-style
styles
footer
Here is an example using css3:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
body content....
</div>
<footer class="footer">
footer content....
</footer>
Update
As @Martin pointed, the ´position: relative´ is not mandatory on the .footer element, the same for clear:both. These properties are only there as an example. So, the minimum css necessary to stick the footer on the bottom should be:
html, body {
height: 100%;
margin: 0;
}
#wrap {
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
Also, there is an excellent article at css-tricks showing different ways to do this: https://css-tricks.com/couple-takes-sticky-footer/
I would use this in HTML 5... Just sayin
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
just set position: fixed to the footer element (instead of relative)
Note that you may need to also set a margin-bottom to the main element at least equal to the height of the footer element (e.g. margin-bottom: 1.5em;) otherwise, in some circustances, the bottom area of the main content could be partially overlapped by your footer
For footer change from position: relative; to position:fixed;
footer {
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
Example: http://jsfiddle.net/a6RBm/
Source: Stackoverflow.com