How to Keep Footer at Bottom of Screen CSS HTML(Sitcky Footer)
- Article
- Comment
Introduction
Keep Footer at Bottom of Screen CSS HTML. This is also called as Sticky Footer. You can do it with help of following code. Usually, we can try with position and its height based. But this is simple and short to do. Sometimes a small code can solve bigger issues, like that way this code helps you to create footer, which always stays at bottom of the page but not sticky in bottom of the screen.
I hope this is better and easier way to do the footer to stay at bottom of the page with less code. If you are looking for the demo. You can get it by the end of this page.
The below one is simple HTML for the keep footer at bottom of the page.
<div id="wrap"> <div id="main"></div> </div> <div id="footer"></div>
And Sticky Footer With CSS .
* { margin: 0; padding: 0; } html, body { height: 100%; } #wrap { min-height: 100%; } #main { overflow: auto; padding-bottom: 180px; /* must be same height as the footer */ } #footer { position: relative; margin-top: -180px; /* negative value of footer height */ height: 180px; clear: both; }
That’s it. You have created your footer as sticky footer now. If you are interested to receive more updates from kvcodes, you can subscribe our newsletter to get more on your inbox. Also you can follow me on different social sites to get more updates from me.