Fixed Footer with Moving Elements... (?)

programming web dev
1

Here’s the problem:

I have a footer that I’d like to have as fixed at the bottom of the page (not viewer, I don’t want my footer to overlap my content at all). However, this footer has a moving element to it (a section that expands), which means that setting a container and setting the position as fixed is out.

I’d like to know how I can make this footer work as I’d like it to.

Example of the problem:

http://www.autumn-firefly.co.uk/caseStudies.php

Visit this page. You’ll see that the footer is sat correctly at the bottom of the page. If you click ‘contact’, it will open up the contact form. Now, go back up to the top and press one of the tabs (e.g. Illustration). Now the footer is floating on the page and not at the bottom, because there is not enough content in the page to keep it at the bottom.

Once again:

**I do not want the footer to overlap my content. I just want it to stay at the bottom of the page.

Setting it as ‘fixed’ will not work, as there is a moving element (the contact form) of the footer.**

Any solutions are welcome…!

2

It will always do that it depends on your screen resolution, if you flip your monitor and make it higher instead of wider it will do the same thing even if you fix it for 1920x1200.

The only way to fix it is to use js to get the size of the window and the content area and if the content area isn’t high enough to force the footer to the bottom of the screen then trigger a function that resizes the content area in order to do so.