Make footer stick to bottom and not overlapp container

Question

I am trying to make this footer div stick to the bottom of my page, as well as not overlapping the container DIV.

I have unsuccessfully been trying to add a push class, with the same height as the footer:

.push {
    min-height: 150px;
    position: absolute;
}

Please help!

http://stackoverflow.com/a/30487509/483779 – Stickers Jul 25 '15 at 15:06 — Stickers, Jul 25 '15 at 15:06

score 0 · Accepted Answer · answered Jul 25 '15 at 14:35

0

use footer{ bottom:0px; position:fixed;}

answered Jul 25 '15 at 14:35

Rachel Gallen

27,943
21
72
81

score 0 · Answer 2 · answered Jul 25 '15 at 14:36

0

remove position: absolute from your container, you dont need it. give footer position: fixed, container needs margin-bottom: 150px;and you're done

https://jsfiddle.net/55frzot1/2/

answered Jul 25 '15 at 14:36

cari

2,251
2
18
27

score 0 · Answer 3 · answered Feb 10 '16 at 09:18

I though I'd take a shot at it and come up with my own solution which is just a tiny bit of css and html

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}

<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

this works by setting the height of the footer and then using css calc to work out the minimum height the page can be with the footer still at the bottom, hope this helps come people :)

Make footer stick to bottom and not overlapp container

3 Answers3