Hi,
I'm fairly new to CSS and am having problems - I've searched everywhere and tried all the solutions that are recommended but can't solve the problem. This is it:
I'm making a new webpage for an online shop. The header and footer remain the same, but the content is added dynamically from a MySQL database, so the height varies. I want the footer to be positioned at the bottom of the page, but if theres a lot of content I want it to be positioned NOT at the bottom of the visible screen window, but at the very bottom of the HTML page, after scrolling down, below all other content. This is the basic structure:
.parent {display:block; min-height:100%; width:100%; position:absolute; top:0px; left:0px; z-index:0;}
.mainbody {position:relative; height:auto;}
.content {position:relative; display:block; padding-bottom:80px; margin:0px auto; width:960px;}
.footer {position:absolute; left:0px; bottom:0px; width:100%; display:block; height:80px; z-index:999;}
<body>
<div class=parent>
<div class=content>
...header here
<div class=mainbody>
...complete content from MySQL database here, sometimes 1 product, sometimes 100 products
</div> (mainbody)
</div> (content)
<div class=footer>
...footer here
</div> (footer)
</div> (parent)
Now the problem is with the height. If I set .mainbody {height:1000px;} it works perfectly. But the problem is that the mainbody height is sometimes 200px and sometimes 3000px. And if I set it to height:auto it doesn't work, the footer is then always at the bottom of the visible screen instead of being below the last line of content.
And the problem is the same with all browsers.
Please help, I've tried so many different solutions in the last couple of days but nothing seems to work!
Start Free Trial
