Twtheo Twtheo - 4 months ago 5x
HTML Question

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

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 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;

This is my HTML (structure):

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

I've tried using
position: fixed
, 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.


Okay, here is the snippet -

<div id="content">
   lots of random stuff<br />
   lots of random stuff<br />
   lots of random stuff<br />
<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 -

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