JavaScript and/or CSS solution

**Sebah** · 07-14-2010, 03:16 PM

Hey!

Sorry for posting in this forum something that might be related to CSS as well.
So I have this page: http://forweb.ro/temp.

What I wanna do with it?
As you may noticed I have an accordion on that page and one peace of footer. The point of it is simple: I want always the footer to be situated at the bottom of the page, even if the content is expanding ( as it is now caused by that accordion ). The thing is that it looks good on my screen resolution ( 1280x1024 ), but on smaller screens the '#footer' sits above the '#content' div.
I'm aware that absolute positioning is keeping the div above everything and the CSS solution of this would be position relative and integrate the #footer into the #content div. But using 'position:relative' I can't use properly the 'bottom:0' property, which is very important in this case.
I had sorted out something interesting here - a jQuery solution ( but the problem using this is that it's not cross-browser and it's not updating depending of the height of the accordion elements ).
My idea is ( note - this is not included in the HTML example below ):

Code:

<script type="text/javascript">
$(document).ready(function() {
	var x = $('#wrap').height();
	var y = $('#content').height();
	var z = $('#footer').height();
	var a = x-(y+z);
	$('#footer').css('margin-top',+ a +'px');
});
</script>

Here's my HTML:

Code:

<!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" />
<title>example</title>
<style type="text/css">
* { margin: 0; padding: 0; border: 0;}
html { width: 100%; height: 100%;}
body { height: 100%; font: normal normal normal 12px/14px "arial"; }
#wrap { position: relative; height: 100%; display: block;}
#content { position: absolute; top: 50px; left: 0;}
ul#accordion { width: 60%; margin: 0px auto;}
#footer { width: 80%; margin: 0px auto; position: absolute; bottom: 0; left: 0; right: 0; background: black; color: white;}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#accordion").accordion({autoHeight: false});
});
</script>
</head>

<body>
<div id="wrap">
	<div id="content">
		<ul id="accordion">
			<li>
				<h3><a href="#">lorem 1</a></h3>
				<div>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				</div>
			</li>
			<li>
				<h3><a href="#">lorem 2</a></h3>
				<div>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				</div>
			</li>
			<li>
				<h3><a href="#">lorem 3</a></h3>
				<div>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				</div>
			</li>
		</ul>
	</div>
	<div id="footer">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
	</div>
</div>
</body>
</html>

What's the solution to this? I'm sure somebody else encountered this problem before... Any kind of solution is welcomed as long as it works!
Please let me know if I wasn't clear enough with my problem.

Thanks!

**Jesdisciple** · 07-18-2010, 01:22 AM

EDIT: I might have been trying to solve a different problem... If so, please correct.

I tested this in Firebug, but you should see here for a cross-browser check to replace window.pageYOffset (necessary because the problem also occurs if the user scrolls after loading the page). Also, note that you need to remove your bottom:0; CSS rule but retain position:absolute; for this to work.

Code:

$('#footer').css('top', $('body').height() - $('#footer').height() + window.pageYOffset);

**traq** · 07-18-2010, 09:03 PM

you want the footer to stick to the bottom of the page (if longer than the window), and to the bottom of the window (if bigger than the page). Correct?

sticky-footer

pure css. minimal html markup. cross-browser.

Thread: JavaScript and/or CSS solution

Thread Tools

Search Thread

JavaScript and/or CSS solution

The Following User Says Thank You to traq For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions