im trying to make my footer sticky on the bottom of the page (at the end of the page content, even if the content is bigger than the screen) i tried many things, maybe something is conflicting with the code, because it seems to be simple.
here's the basic code im trying:
<body>
<div id="main">
- a lot of divs and content, pictures, etc -
<div id="footer1">
- footer content -
</div>
</div>
</body>
on css:
body
{
height:100%;
position:relative;
}
#main
{
height:100%;
position:absolute;
}
#footer1
{
position:absolute;
width:100%;
height:150px;
bottom:0px;
left:0px;
background-color:#5B5B5B;
}
please, note that i already tried removing the div "main", also tried to use:
<footer>
after the body tag instead of div "footer1", nothing works, except if i put the body height manually to a number instead of 100%, like 1200px, then the footer go to position 1200px, dont know why it doesn't recognize the 100%, i also tried:
<div style="clear:both"></div>
after the footer div
also, i dont want a fixed screen footer "position:fixed"
The height of your <body> is zero because the height of the parent <html> tag is undefined. Set the height of your the parent to 100% if you want to have the footer positioned absolute rather than fixed to your screen.
html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#main {
height: 100%;
position: absolute;
}
#footer1 {
position: absolute;
width: 100%;
height: 150px;
bottom: 0px;
left: 0px;
background-color: #5B5B5B;
}<html>
<body>
<div id="main">
- a lot of divs and content, pictures, etc -
<div id="footer1">
- footer content -
</div>
</div>
</body>
</html></div>
Thank you for the answer, the problem is that i was not setting a "min-height:1000px) (the approximate px of my content) now its working fine.