Footer does not move to the bottom of the page

Question

today I've been trying to work out a footer, I've been trying to do this through CSS, but it wouldn't move to the bottom, whatever I tried. This is what I have currently:

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: red;
}

<div id="footer">
  <p>TEST TEKST</p>
</div>

This is the result:

Depending on your html declarations you might need to add a rule for `html,body {height: 100%}` — vicbyte, Sep 20 '18 at 10:04
put your code in https://jsfiddle.net/ and let us know the link — לבני מלכה, Sep 20 '18 at 10:06
@vicbyte That seemed to work and fix it. Thank you very much! — Robinblitz, Sep 20 '18 at 10:06
@Robinblitz take a look of `fixed` support:https://caniuse.com/#feat=css-fixed — לבני מלכה, Sep 20 '18 at 10:07
Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Alon Eitan, Sep 20 '18 at 10:16
@Robinblitz, Accept the answer if it worked for you rather than thank you please — Hary, Sep 20 '18 at 10:17

score 0 · Answer 1 · answered Sep 20 '18 at 10:14

0

Try this

body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 50px;
}

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

answered Sep 20 '18 at 10:14

Nacorga

507
4
17

score 0 · Answer 2 · answered Sep 20 '18 at 10:15

position absolute always depends upon its ancestor (position relative), but if has no positioned ancestors, it uses the document body, and moves along with page scrolling.

try putting your div#footer directly inside the body

<body>
  <div id="footer">
    <p>
      TEST TEKST
    </p>
  </div>
</body>

and also add left property to your css to prevent it to overlap its ancestor

#footer{
  position: absolute;
  bottom: 0;
  left: 0;    //<----
  width: 100%;
  height: 60px;
  background-color:   red;
}

score 0 · Answer 3 · answered Sep 20 '18 at 10:17

you don't have any content before your footer so DOM only have one element i.e. footer so bottom: 0px will not do the work. If you have only one element in DOM and you want its position w.r.t to your window size try giving values in "vh" to fix it position depending on your window size. here is the updated snippet. hope that's what you are looking for

#footer {
  position: relative;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background-color: red;
  margin-top: 100vh;
}

<div id="footer">
  <p>TEST TEKST</p>
</div>

score 0 · Answer 4 · answered Sep 20 '18 at 10:35

Add 100% height to your HTML too

html, body {
  min-height: 100%;
}

Also, you could have your footer to display:fixed; so that is always at the bottom of your page (if the page has a scroll).

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: red;
}

Finally for best practice, change your footer from an ID to a Class. (in CSS change # to .).

score -1 · Accepted Answer · answered Sep 20 '18 at 10:16

-1

Without seeing your entire html its difficult to be sure but you need to declare height: 100% on the body & html also your footer maybe inside an element that has position: relative; meaning that your footer will position to the bottom of that element.

html, body {
  min-height: 100%;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: red;
}

<div id="footer">
  <p>TEST TEKST</p>
</div>

answered Sep 20 '18 at 10:16

btow54

111
2
8

This was indeed the issue. What I had was: body { min-height: 100%; } I forgot the "html, " before that – Robinblitz Sep 20 '18 at 10:22

Footer does not move to the bottom of the page

5 Answers5