Stick footer to the bottom (NOT fixed)

Question

footer {
  font-family: arial;
  bottom: 0;
  position: absolute;
  color: #fff;
  width: 100%;
  background-color: #2E6171;
  text-align: center;
  padding: 15px 0;
  -webkit-box-shadow: 0px -10px 40px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px -10px 40px -3px rgba(0,0,0,0.75);
  box-shadow: 0px -10px 40px -3px rgba(0,0,0,0.75);
  letter-spacing: 1px;
}

I want my footer to stick to the bottom on the page and right now it its on fullscreen because everything fits in one vieuwport but when i resize my window smaller and i have to scroll to see everything the footer is stuck in the middle of the page

This is not complete example. At minimum I would have to see the body, it probably needs `height: 100vh` — Akxe, Mar 03 '17 at 23:47
@Midorikawa *"Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a [mcve]."* — Michael Coker, Mar 03 '17 at 23:53
Why am I never tempted to answer questions where the only viable solution (fixed positioning) is forbidden by the title for unknown reasons.... — Niels Keurentjes, Mar 04 '17 at 00:23
@Midorikawa Yeah, well `height: 100%` mean fill as much of space as needed when on body... give it `min-height: 100vh` and it may be fixed — Akxe, Mar 04 '17 at 03:07

score 0 · Answer 1 · answered Mar 03 '17 at 23:46

0

You can use Bootstrap to create a sticky footer. Here is the example they provide: https://getbootstrap.com/examples/sticky-footer/

I hope this helps!

answered Mar 03 '17 at 23:46

Ralph David Abernathy

5,230
11
51
78

Stick footer to the bottom (NOT fixed)

1 Answers1