How to fix footer on bottom of screen, regardless of browser or device?

Question

I know about sticky footer. But my situation is that I am developing a website that will be used on PC & mobile devices. Therefore, the footer displayed gets adjusted by width of the screen.

And footer's height gets changes on each resolution.

Can anyone have idea that how could I display footer on the bottom of the page(not screen). Some page's height is small, and footer gets displayed in between of page.

I have following structure:

<body style="height:100%;">
 <div style="height:100%;">
  <div id="wrapper" style="height:100%; max-width:800px;">
   <div id="header">
    some content
   </div>
   <div id="content">
    some content
   </div>
   <div id="footer" style="position:relative; width:100%;">
    some content
   </div>
  </div>
 </div>
</body>

i am confused why you don't just set a max-height style on your footer with overflow: hidden - aren't you just trying to keep your footer the same height regardless of window size? Also, modernizr and normalize.css might help keep consistent styling across browsers if you're noticing big differences there. — BumbleB2na, Feb 25 '13 at 15:08
Please look around for few moment then ask a question this question is asked several times: http://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom — NewUser, Feb 25 '13 at 15:10
This looks the same http://stackoverflow.com/questions/311990/how-do-i-get-a-div-to-float-to-the-bottom-of-its-container — TravellingGeek, Feb 25 '13 at 15:10
Hi, thanks for your comments but as I have stated that this website will be used on **mobile devices also** therefore I have to set footer's width:100%; (that means I am not sure of footer's height on different resolutions). — user1400290, Feb 26 '13 at 05:20

score 24 · Answer 1 · edited Jul 25 '17 at 19:05

This might clear something up:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

How to fix footer on bottom of screen, regardless of browser or device?

1 Answers1

Linked