A lot of the clients had request us with the following request, they want the footer to be “ALWAYS” appear on the very bottom without any JavaScript. So here you go. Also today we had completed the footer on our coming to launch Joomla templates Busuits, you can also view the footer in action under here.
CSS for your always bottom footer
CSS – always bottom footer
html,body{margin:0; padding:0; height:100%;}
#vc-main{min-height:100%; position:relative;}
#vc-header{background:#9F0;}
#vc-body{padding-bottom:80px;} /* Height of the footer */
#vc-footer{position:absolute; bottom:0; width:100%; height:80px;/* Height of the footer */background: #FC0;}
p, h1{padding:10px; margin:0;}
CSS hack for your Internet Explorer 5.5, 6 and 7
ie hack
<!--[if lte IE 7]>
<style type="text/css">
#vc-main{height:100%;}
</style>
<![endif]-->
HTML
html code. Place this html code within your html tag
<body>
<div id="vc-main">
<!-- BEGIN: HEADER-->
<div id="vc-header">
<p>Header here</p>
</div>
<!-- END: HEADER -->
<!-- BEGIN: BODY -->
<div id="vc-body">
<p>Body here</p>
</div>
<!-- END: BODY -->
<!-- BEGIN: FOOTER -->
<div id="vc-footer">
<p>Footer here</p>
</div>
<!-- END: FOOTER -->
</div>
</body>
See the always bottom footer in action: Plain HTML | Joomla Demo
Download: Always bottom footer with CSS only - Download (2548)
Download: Always bottom footer with CSS only - Download (2548)
Be a link sponsor for this page now
[sponsorbox]
I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.
Good Luck!
Very nice post. Do you accept guest writers?
Hi Wendy,
Yes we do accept guest writers.
Currently we have not setup the form for it yet.
please send your information to info@designersandbox.com
Please give us some background knowledge about yourself, and the topics you are interested in.
Thanks for the love of this site, and thanks for your contribution.
thanks !! very helpful post!
There is certainly certainly a good deal to know about this. I think you created some good points in this subject. So, just want to express excellent job!
Best you should make changes to the webpage name title Always bottom footer with CSS only – Tutorials | Designer Sandbox to more catching for your subject you write. I enjoyed the post still.
Happy new year
Good article
This is not working for IE7
That will never work.
Use "position: fixed" instead.
Good article
This is not working for mobile