[Solved] Place footer at the absolute bottom.

[jLinux]

Im trying to implement a footer for my website, and it needs to be at the very bottom of the page.

If the content of the page is only a few lines long, then I need the footer to NOT be right below that, but rather, all the way at the bottom.

However, if the content of the page is more than 100% of the page height, then I need the footer to be just below the content.

The CSS I have now will place it at the bottom if the content is less than 100%, but if its more than 100%, it will place the content at the bottom of the window (not the bottom of the content), and put it under the content.

That result isnt terribly bad, except that I have a timeline on one of my pages, so as you scroll, you see the footer between items..

Broken code:

.footer {
padding: 10px 0;
margin: 0 25px 0 245px;
border-top: 1px solid #CAD0D6;
line-height: 20px;
bottom: 0 !important;
z-index: -10000;
width: 80%;
position: fixed;
}

Thanks for any help!

P.S. JSFiddle: https://jsfiddle.net/a5L31w7f/

[Shikkediel]

Something like this?

https://jsfiddle.net/y4khjejs/

[jLinux]

Hey… nice, I thought you couldn’t get it without JS ;-) Thanks man, good job

I’ll implement it on my app and make sure it works. it preferably should work without having to edit the existing content of each page, so ill see

[Shikkediel]

Yeah, edited afterwards. Lol. It was missing the obvious position: relative on body so the absolute element would act as having fixed position and be placed at the bottom of the screen instead of the document.

I changed the CSS of .box a bit because the margins were messing up the height of body. This is probably not necessary on the final HTML but I guess it’s more about the general idea anyway.

Cheers.

[jLinux]

I updated it so the padding isnt on the last box, but rather on the page content.

https://jsfiddle.net/y4khjejs/4/

[Shikkediel]

Seems to work like a charm. :-)

[jLinux]

Looks like the main thing I was missing was

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

the min-height and position seemed to do the trick.

[Atelierbram]

Solution couldn’t be more minimalistic, +1 for that.

Have an example here with a similar, but more conservative, approach using min-height: 100% ISO viewport-units.

And there’s this classic which is more “flexible“, because it doesn’t use absolute positioning. Meaning: would there be a need to put more stuff in the footer, social-media links for example, then positioning will be easier to accomplish. In my example I use flexbox inside of the footer to position the links.

[Author]

Posts