We help IT Professionals succeed at work.

Sticky footer stays still when new content is displayed

552 Views
Last Modified: 2013-11-19
This is a new problem to me, and is worth a laugh if nothing else...!  Maybe I've been staring at it for too long...!?!?

I want to have a sticky footer at the bottom of each page.  There are dozens of tutorials for this, however, they all break down given the following scenario...
On page load, the page displays perfectly with the footer at the bottom.  I have some content (a paragraph) which is hidden on the page.  When the content displays, the page size expands to accommodate the content, however, the footer stays in the same place and does not move downwards.  

If you open the file attached and click the link, then scroll down, you'll see the problem.  Is there any way to stop this behaviour occurring?  More to the point, how come it happens in the first place when the style rules clearly state the DIV should be fastened to the bottom of the page??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html {margin:0; padding:0}
		body {margin:0; padding:0; background-color:black}
		#container {position:relative; margin:0 auto; width:950px; background-color:#aaaaaa; padding:5px}
		#header {height:100px; background-color:white; border:1px solid red}
		#content {position:relative; margin-top:1em; background-color:white; border:1px solid red; margin-bottom:180px/* to allow for footer height */}
		#footer {position:absolute; bottom:0; width:100%; height:180px; background-color:white; border-top:1px solid red; border-bottom:1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
</head>
<body>
	<form id="form1" runat="server">
		<div id="container">
			<div id="header">Header</div>
			<div id="content">
				<h1>Hello World</h1>
				<h2>Hello World</h2>
				<h3>Hello World</h3>
				<p>Lorem ipsum dolor sit amet.</p>
				<p><a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
				<div id="showhide" style="display:none">
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</form>
</body>
</html>

Open in new window

Comment
Watch Question

Roman GhermanSenior Software Engineer

Commented:
try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html {margin:0; padding:0}
		body {margin:0; padding:0; background-color:black}
		#container {position:relative; margin:0 auto; width:950px; background-color:#aaaaaa; padding:5px}
		#header {height:100px; background-color:white; border:1px solid red}
		#content {position:relative; margin-top:1em; background-color:white; border:1px solid red; margin-bottom:180px/* to allow for footer height */}
		#footer {position:fixed; bottom:0; width:100%; height:180px; background-color:white; border-top:1px solid red; border-bottom:1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
</head>
<body>
	<form id="form1" runat="server">
		<div id="container">
			<div id="header">Header</div>
			<div id="content">
				<h1>Hello World</h1>
				<h2>Hello World</h2>
				<h3>Hello World</h3>
				<p>Lorem ipsum dolor sit amet.</p>
				<p><a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
				<div id="showhide" style="display:none">
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</form>
</body>
</html>

Open in new window

CERTIFIED EXPERT

Author

Commented:
Position:fixed is no good I'm afraid because then it floats over the top of the page content.  I just need the footer to stay at the bottom, and always at the bottom, without ever floating upwards to meet the content if there isn't much on the page...
Roman GhermanSenior Software Engineer

Commented:
then try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html {margin:0; padding:0}
		body {margin:0; padding:0; background-color:black}
		#container {position:relative; margin:0 auto; width:950px; background-color:#aaaaaa; padding:5px}
		#header {height:100px; background-color:white; border:1px solid red}
		#content {position:relative; margin-top:1em; background-color:white; border:1px solid red; margin-bottom:180px/* to allow for footer height */}
		#footer {bottom:0; width:100%; height:180px; background-color:white; border-top:1px solid red; border-bottom:1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
</head>
<body>
	<form id="form1" runat="server">
		<div id="container">
			<div id="header">Header</div>
			<div id="content">
				<h1>Hello World</h1>
				<h2>Hello World</h2>
				<h3>Hello World</h3>
				<p>Lorem ipsum dolor sit amet.</p>
				<p><a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
				<div id="showhide" style="display:none">
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</form>
</body>
</html>

Open in new window


however in initial state it will not be at the bottom of the page
CERTIFIED EXPERT

Author

Commented:
Hi

The same can be achieved by just including the footer div normally with no styling.  

So far I have been completely able to meet both criteria that are needed - e.g. always at the bottom, plus when there is less content...
Roman GhermanSenior Software Engineer

Commented:
HEre is a Javascript solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html {margin:0; padding:0}
		body {margin:0; padding:0; background-color:black}
		#container {position:relative; margin:0 auto; width:950px; background-color:#aaaaaa; padding:5px}
		#header {height:100px; background-color:white; border:1px solid red}
		#content {position:relative; margin-top:1em; background-color:white; border:1px solid red; margin-bottom:180px/* to allow for footer height */}
		#footer {bottom:0; width:100%; height:180px; background-color:white; border-top:1px solid red; border-bottom:1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
	
	<script type="text/javascript">
		<!--
		function setFooterPostition()
		{
			 var viewportheight;
			 
			 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
			 
			 if (typeof window.innerWidth != 'undefined')
			 {
				
				  viewportheight = window.innerHeight
			 }
			 
			// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

			 else if (typeof document.documentElement != 'undefined'
				 && typeof document.documentElement.clientWidth !=
				 'undefined' && document.documentElement.clientWidth != 0)
			 {			
				   viewportheight = document.documentElement.clientHeight
			 }
			 
			 // older versions of IE
			 
			 else
			 {			   
				   viewportheight = document.getElementsByTagName('body')[0].clientHeight
			 }
			 
			
			if (document.getElementById('container').clientHeight > viewportheight)
			{
			    document.getElementById('footer').style.position = 'inherit';
			}
			else
			{
				document.getElementById('footer').style.position = 'absolute';
			}
		}
		//-->
	</script>

</head>
<body onload="setFooterPostition();" onresize="setFooterPostition();">
	<form id="form1" runat="server">
		<div id="container">
			<div id="header">Header</div>
			<div id="content">
				<h1>Hello World</h1>
				<h2>Hello World</h2>
				<h3>Hello World</h3>
				<p>Lorem ipsum dolor sit amet.</p>
				<p><a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
				<div id="showhide" style="display:none">
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</form>
</body>
</html>

Open in new window

CERTIFIED EXPERT

Author

Commented:
I thought that might be the next step.  The problem is that onresize is not valid XHTML...!
Roman GhermanSenior Software Engineer

Commented:
use window.onresize:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
	<title>Test</title>
	<style type="text/css">
		html {margin:0; padding:0}
		body {margin:0; padding:0; background-color:black}
		#container {position:relative; margin:0 auto; width:950px; background-color:#aaaaaa; padding:5px}
		#header {height:100px; background-color:white; border:1px solid red}
		#content {position:relative; margin-top:1em; background-color:white; border:1px solid red; margin-bottom:180px/* to allow for footer height */}
		#footer {bottom:0; width:100%; height:180px; background-color:white; border-top:1px solid red; border-bottom:1px solid red}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function DoToggle() {
			if (document.getElementById('showhide').style.display == 'block') {
				document.getElementById('showhide').style.display = 'none';
			} else {
				document.getElementById('showhide').style.display = 'block';
			}
		}
		//]]>
	</script>
	
	<script type="text/javascript">
		<!--
		function setFooterPostition()
		{
			 var viewportheight;
			 
			 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
			 
			 if (typeof window.innerWidth != 'undefined')
			 {
				
				  viewportheight = window.innerHeight
			 }
			 
			// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

			 else if (typeof document.documentElement != 'undefined'
				 && typeof document.documentElement.clientWidth !=
				 'undefined' && document.documentElement.clientWidth != 0)
			 {			
				   viewportheight = document.documentElement.clientHeight
			 }
			 
			 // older versions of IE
			 
			 else
			 {			   
				   viewportheight = document.getElementsByTagName('body')[0].clientHeight
			 }
			 
			
			if (document.getElementById('container').clientHeight > viewportheight)
			{
			    document.getElementById('footer').style.position = 'inherit';
			}
			else
			{
				document.getElementById('footer').style.position = 'absolute';
			}
		}
		
		window.onresize = setFooterPostition;
		//-->
	</script>

</head>
<body onload="setFooterPostition();">
	<form id="form1" runat="server">
		<div id="container">
			<div id="header">Header</div>
			<div id="content">
				<h1>Hello World</h1>
				<h2>Hello World</h2>
				<h3>Hello World</h3>
				<p>Lorem ipsum dolor sit amet.</p>
				<p><a href="#" onclick="DoToggle(); return false;">Toggle Hidden</a></p>
				<div id="showhide" style="display:none">
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</form>
</body>
</html>

Open in new window


CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

Author

Commented:
Sorry, background image is also moved into BODY tag rather than inside Footer
Roman GhermanSenior Software Engineer

Commented:
did you try my last solution?
CERTIFIED EXPERT

Author

Commented:
Yes, I'm afraid when the link is clicked to reveal the hidden contents, the footer does not move.  Also, when the window is certain sizes and the link is clicked to hide the contents, the footer positions itself incrrectly (too high).  Sorry about that.
CERTIFIED EXPERT

Author

Commented:
Found CSS solution.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.