Getting Content to Stick to Footer? [Archive]

Click to See Complete Forum and Search --> : Getting Content to Stick to Footer?

GizDrak

05-06-2009, 11:40 AM

Is it possible to get my content to stick to my footer? I have a sticky footer at the bottom of my page and I would like the content to always be 100% of the page and sitting right on top of the footer.

I been messing around with different things for hours and nothing I seem to do will get my content box to stay stuck to the footer at the bottom of my page.

Here is a link to the site printing.ou.edu/new-index.html

Thanks for your help :-)

Mayday

05-06-2009, 12:51 PM

Does this solve your issue?

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

GizDrak

05-06-2009, 01:04 PM

Does this solve your issue?

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

That is the code I am using for the sticky footer it does not help my content area stick to my footer.

If it helps anyone this is what I am going for http://printing.ou.edu/Draft3.png

GizDrak

05-11-2009, 07:34 AM

I have Solved this problem sadly I had to use Java Script to get it done but it works.

Here is the Java Script for anyone else trying to do something like this.

<script type="text/javascript">
window.onload = function() {
contentHeight();
}
window.onresize = function() {
contentHeight();
}

function contentHeight() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
var headerHeight = document.getElementById('header').offsetHeight;
var footerHeight = document.getElementById('footer').offsetHeight;
var pushHeight = document.getElementById('push').offsetHeight;
var menuHeight = document.getElementById('menu').offsetHeight;
var contentElement = document.getElementById('content');
var contentbgElement = document.getElementById('content-bg');
contentElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
contentbgElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
}
}

function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight=window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight=document.documentElement.clientHeight ;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight=document.body.clientHeight;
}
}
}
return windowHeight;
}
</script>

See you all around

Letniq

05-20-2009, 07:55 AM

I bumped into the same task last days and I found much lighter solution. Here's the part of the code. I hope It will be helpfull. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>
<script type="text/javascript">
function getheight(){
document.getElementById("content").style.height = document.getElementById("menu").offsetTop - 35 + "px";
}
</script>
</head>

<body onload="getheight()" onresize="getheight()">
<div id="header">
Header goes here...
</div>

<div id="content">
Content goes here...
</div>

<div id="menu">
Menu goes here
</div>

<div id="footer">
Footer goes here...
</div>
</body>
</html>