Sticky Footer & can't change HTML structure

HTML & CSS
1

Hi

I’m creating a Moodle site but am having a bit of trouble with the theme I’m using (I did ask over on the Moodle forums but had no response so I’m trying here).

The footer of my theme doesn’t stick to the bottom of the browser window when there isn’t enough content to fill it.

If I were building a site from scratch I could do it fine, but I can’t edit the HTML div structure so am trying to work with what I have.

This is the HTML:


<div id="page">

<div id="headerwrap"></div>

<div id="contentwrapper">

<div id="page-content"></div>

</div>

<div id="footerwrapper"></div>

</div>

Any suggestions would be welcome.

Thanks

2

HI,

With that structure you’d need to use the absolute footer technique which is a little unreliable in old IE in dynamic situations but these days is less of an issue.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p{margin:0 0 1em}
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
#page:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
html, body {
	height:100%;/* needed to base 100% height on something known*/
	text-align:center;
	margin:0;
	padding:0;
}
#page {
	width:760px;/* or whatever it needs to be */
	background:#ffffcc;
	margin:auto;
	min-height:100%;
	text-align:left;
	clear:both;
	position:relative;
}
* html #page { height:100% }
#contentwrapper { padding-bottom:40px;/* protect absolute footer	*/ }
#footerwrapper {/* footer now sits at bottom of window*/
	position:absolute;
	bottom:0;
	left:0;
	background:red;
	width:760px;/* whatever the parent is */
	margin:auto;
	height:40px;/* must have a fixed height and matches the height of the padding on bottom of contentwrapper */
	clear:both;
}
</style>
</head>

<body>
<div id="page">
		<div id="headerwrap"></div>
		<div id="contentwrapper">
				<div id="page-content">
				<p>test</p>
				<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test last</p>
				</div>
		</div>
		<div id="footerwrapper"></div>
</div>
</body>
</html>

A sticky footer only works with a fixed height footer (although you can use ems if necessary.)

3

Thanks Paul I will give it a go.

By “dynamic situations” do you mean responsive sites, or just resizing of browser window? Or something else?

My site is just a centered 960px grid. It’s quite likely there will be some IE6, 7 and 8 users so I will give it a good test in those browsers.

4

IE8 should be ok. It’s just that ie7 and under frequently misplace absolute elements when placed at the bottom of 100% wrapper when inner content is inserted and removed via javascript (such as in a hide and show). There is JS fix though if this happens and you have to cause the page to reflow which can be done by testing a classname on the body or other element after your routine has finished (el.className = el.className;//reflow).

5

I don’t think Moodle uses a huge amount of javascript if any at all so with any luck I’ll be ok.

I’ll let you know, thanks very much.

6

Thanks a lot, that worked great.