How to keep footer at bottom of screen

Question

What is best practice for setting up a web page so that if there is very little content/text to be displayed on that web page the footer is displayed at the bottom of the browser window and not half way up the web page?

a good practice is to first search other similar discussions, like http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height — Fabrizio Calderan, Sep 11 '13 at 11:33
Top answers **did not work with REACT** -- try [this Flexbox solution](https://stackoverflow.com/a/63382499/1873386) that works with React/Angular/html/everything, from Chris Coyier *(CSS-Tricks)* — crashwap, Aug 12 '20 at 18:18

score 95 · Accepted Answer · edited Jul 25 '17 at 19:08

95

What you’re looking for is the CSS Sticky Footer.

* {
  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;
  background-color: red;
}


/* Opera Fix thanks to Maleika (Kohoutec) */

body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;
  /* thank you Erik J - negate effect of float*/
}

<div id="wrap">
  <div id="main"></div>
</div>

<div id="footer"></div>

edited Jul 25 '17 at 19:08

Al Foиce ѫ

4,195
12
39
49

answered Sep 11 '13 at 11:32

Jezen Thomas

13,619
6
53
91

5

for some reason adding breaks the footer. – surya Jun 19 '15 at 17:04
10

My footer doesn't have fixed height...it may vary on different devices, or between portrait and landscape format. How to do it? – newman Mar 14 '16 at 17:00
1

@miliu, how is your footer height calculated? If you're using relative values (like em's or vh/vw's), you can probably put in the same values here. If it's more complicated than that, CSS's [calc()](https://developer.mozilla.org/en/docs/Web/CSS/calc) function may come in handy. As a last resort, consider setting the property dynamically with JavaScript using dimensions obtained e.g with [Element.getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) or jQuery. – Hubert Sep 21 '16 at 21:01
The CSS Sticker Footer link sends me to a bunch of spam. – Raymond26 Apr 02 '17 at 11:55
@Raymond26 Thanks. Removed that link. – Jezen Thomas Apr 03 '17 at 12:12

score 39 · Answer 2 · answered Sep 11 '13 at 11:32

39

You could use position:fixed; to bottom.

eg:

#footer{
 position:fixed;
 bottom:0;
 left:0;
}

answered Sep 11 '13 at 11:32

Chamara Keragala

5,627
10
40
58

94

Then it displays at the bottom of the screen no matter how much content is on the actual page. Bad advice. – mwieczorek Jul 17 '16 at 12:06
24

@mwieczorek eh, I guess it depends on what you want? I wouldn't say Chamara's suggestion was bad. It was actually what I wanted and it worked for me :) On screen resize, my footer stays exactly where I want it to be: at the bottom of my page. Thanks Chamara. – sansae Jan 12 '17 at 22:52
1

thanks..it worked. – arn-arn Aug 05 '17 at 15:22
1

Nice job Chamara. That's my jam right there. – a2f0 Feb 22 '18 at 18:40
1

I agree, good advice. What I wanted and thought that's what mwieczorek was asking. – Mike1982 Oct 29 '18 at 02:05
1

ah yeah. Nice and simple. Puts it right at the bottom with no fuss. Just drop the `left:0` and it's even more straight to the point. – mr haven Mar 14 '19 at 02:55
1

This works perfectly but if you then also want the main content to be scrollable if it takes up more space, you have to set the height for that programmatically and recalculate it on resize. window.addEventListener('resize', function(event){ calculateMainContentHeight(); }); – Vincent Jun 18 '19 at 00:14
If the page content fits between the stuff above it and the footer, then this looks great. However, if the content is more than that, then the footer will sit **on top of** some content *(and cannot be scrolled into view)* and that is probably NOT what you want. See [this answer](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page/63382499#63382499) instead. – cssyphus Aug 13 '20 at 14:40

score 2 · Answer 3 · answered Sep 11 '13 at 11:33

2

HTML

<div id="footer"></div>

CSS

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   
   background:blue;//optional
}

answered Sep 11 '13 at 11:33

Sasidharan

3,676
3
19
37

10

Absolute positioning is the best way to ensure your markup breaks on certain devices. – mwieczorek Jul 17 '16 at 12:04

score 0 · Answer 4 · answered Sep 11 '13 at 11:31

0

set its position:fixed and bottom:0 so that it will always reside at bottom of your browser windows

answered Sep 11 '13 at 11:31

Ganesh Pandhere

1,612
8
11

1

Can anyone justify why this was downvoted? I guess that was the easiest way to keep the element at the bottom of the viewport. – Ganesh Pandhere Jun 25 '15 at 19:33
27

Yes. It was downvoted because if a page has more content on the page, the footer still remains at the bottom of the page, no matter of the document height. This is no correct behaviour. – Radu Oct 05 '15 at 13:53
2

Radu - That's the reason for this entire discussion. To keep the footer visible and not deep in the netherlands and the bottom of the well. Chamara above said the same thing. Did you downvote her too? – Adrian Bartholomew Mar 23 '18 at 19:01

score 0 · Answer 5 · edited Jun 25 '15 at 07:41

0

Perhaps the easiest is to use position: absolute to fix to the bottom, then a suitable margin/padding to make sure that the other text doesn't spill over the top of it.

css:

<style>
  body {
    margin: 0 0 20px;
  }
  .footer {
    position: absolute;
    bottom: 0;
    height: 20px;
    background: #f0f0f0;
    width: 100%;
  }
</style>

Here is the html main content.

<div class="footer"> Here is the footer. </div>

edited Jun 25 '15 at 07:41

R3uK

14,417
7
43
77

answered Sep 11 '13 at 11:36

Seth Jeffery

1,110
1
8
8

13

This works if the content does not take up the full page. It breaks once you add more content. – RSSM Oct 17 '16 at 00:24
2

Downvote: As RSSM said, it breaks if the page is taller than the screen. Really, do not recommend this. – Tomas Gonzalez Jan 24 '17 at 17:09
1

Tbh I'm not sure what I was thinking when I wrote this code. It seemed reasonable at the time... `:) – Seth Jeffery Mar 28 '17 at 11:47

score -6 · Answer 6 · edited Mar 20 '14 at 05:12

-6

use this style

min-height:250px;
height:auto;

edited Mar 20 '14 at 05:12

Has AlTaiar

4,052
2
36
37

answered Sep 11 '13 at 11:32

vishal shah

212
1
3
15

How to keep footer at bottom of screen

6 Answers6

Linked

Related