How to Keep Footer at Bottom of Screen CSS HTML(Sitcky Footer) - Kvcodes
X

Congrats, You are Subscribed to Receive Updates.

How to Keep Footer at Bottom of Screen CSS HTML(Sitcky Footer)


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.

sticky-footer

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.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts