I cannot get this footer to stay at the very bottom of the page

Question

So I'm making a website and no matter what I do, I cannot get my footer acting the way I would like, I want it to be at the very bottom of the page (not floating) so it cannot be seen if there is a page full of content. I have tried many things, and looked all around but can't find the answer I need, sorry if this is a duplicate. Here is my CSS code, and the structure of my HTML.

This is my Html and CSS:

footer {
  bottom: 0;
  height: 10%;
  min-height: 75px;
  left: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  background: #CAA400;
  vertical-align: middle;
  color: #232323;
}

<div>
  lots of random stuff
</div>
<footer id="foot">
  <p></p>
</footer>

I've tried using position: fixed, position: absolute, position: relative, and many things, but I cannot seem to figure it out. I think it may be a problem with maybe a parent container in my CSS, but I'm not sure, any extra input to that would also be helpful, Thanks.

Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — jmoerdyk, May 31 '16 at 20:16
Since you haven't added Javascript in the tags, I'm not going to post my answer. With JS its piece of cake. — Rohit Kumar, May 31 '16 at 20:18
@Rachel Gallen I had it sticking to the bottom, it would then cover content if the page content was longer than the screen. I want the footer to be all the way at the bottom, it's my idea that sticky footer is at the bottom of screen, not page. Even when it was sticky it would still cover content scrolled all the way to the bottom — Twtheo, May 31 '16 at 20:18
@Rohit Kumar I had javascript initially that was edited out, but it wasn't doing anything besides populating the footer (it was just for kicks, but I'm open to js) — Twtheo, May 31 '16 at 20:19
@Twtheo http://stackoverflow.com/questions/32105475/sticky-footer-floating-in-page-when-resizing-reasked/32105670#32105670 this was one of my answers. It contains a fiddle. the guy who asked the question didn't actually have much in his footer, just a "hello", right-aligned. — Rachel Gallen, May 31 '16 at 20:25
Thanks for the random downvote. The suggested duplicate does not solve my problem. Neither does @Rachel Gallen suggested solution. Is it possible another element in my css is stopping this from working? — Twtheo, May 31 '16 at 20:53

score 1 · Answer 1 · answered May 31 '16 at 20:16

when you want to select html tag/s use document.querySelector(). Because you have given it an id, in your css file, you need to select the element by id. If this doesn't help, use % on height. now that it all adds up to 100% also as far as height goes, it should be responsive.

#foot {
bottom: 0;
height: 10%;
min-height: 75px;
left: 0;
position: absolute;
width: 100%;
text-align: center;
background: #CAA400;
vertical-align: middle;
color: #232323;
}

for example:

navbar {height: 10%}
body {height: 80%}
footer {height: 10%}

score 1 · Accepted Answer · answered May 31 '16 at 20:28

1

Okay, here is the snippet -

<div id="content">
   lots of random stuff<br />
   lots of random stuff<br />
   lots of random stuff<br />
</div>
<footer id="foot"><p></p></footer>

I've added an ID to the content. And then I use JS to detect its height and set footer's top property as required.

var top = $('#content').height();
if(top > $(window).height()) {
    $('#foot').css('top', top+'px');
}

Your rest CSS remains the same.

Here are the samples -

https://jsfiddle.net/v7tvxcxc/

https://jsfiddle.net/v7tvxcxc/1/

Check both fiddles. The first one is with content height falling shorter than window height. And the second one is just opposite.

answered May 31 '16 at 20:28

Rohit Kumar

2,048
1
14
28

1

I tried this and it seems to be stuck, it's at the bottom when the page first loads, and when I scroll it ends up moving to the middle of the page. – Twtheo May 31 '16 at 20:59
1

@Twtheo you tried on your own end?? In the fiddle is it working as you want?? – Rohit Kumar Jun 01 '16 at 06:40

score 1 · Answer 3 · answered May 31 '16 at 20:59

If you can add a spacer to the markup, you can just set the body's min height to 100vh, and then absolutely position the footer. Don't forget you need to position:relative; the body to make everything flow correctly!

footer {
bottom: 0;
height: 10%;
min-height: 75px;
left: 0;
position: absolute;
width: 100%;
text-align: center;
background: #CAA400;
vertical-align: middle;
color: #232323;
}
#foot_spacer{
  height: 10%;
  min-height:75px;
}
body{
  min-height:100vh;
  box-sizing:border-box;
  position:relative;
  margin:0;
}

<body>
  <div>
   lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff 
  </div>
  <div id='foot_spacer'></div>
 <footer id="foot"><p></p></footer>
</body>

I would also recommend adjusting the footer (and spacer) height to 10vh instead of 10% so a really long article doesn't give you a really tall footer.

it's a little easier to play with the size on jsfiddle so try here too

Fiddle: https://jsfiddle.net/trex005/v8rct2ue/

I cannot get this footer to stay at the very bottom of the page

3 Answers3