Twtheo Twtheo - 6 months ago 9
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):

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


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

Answer

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.