PDA

View Full Version : Div headers and footers and resize contents


alanmac
05 Dec 2008, 07:36 AM
I have the following 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>
<title></title>
<link href="Container.css" type="text/css" rel="Stylesheet"/>
</head>
<body>
<div class="outercontainer">
<div class="innercontainer">
<div class="header">
header<br />
header<br />
header<br />
header<br />
header<br />
header<br />
header<br />
</div>
<div class="content">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
<div class="footer">
footer
footer<br />
</div>
</div>
</body>
</html>

And the following css:
.outercontainer { overflow:visible; background:#cccccc; border:0px }
.innercontainer { overflow:visible}
.header { overflow : visible; background:yellow }
.content { overflow : auto; background:red; height:200px; }
.footer { overflow : visible; background:green;}

What I am trying to do is when the window is resized, have the footer stick to the bottom of the page, and the content expand.

The code is generated by asp, and we have to have a set height for the form initially.
Wickham
05 Dec 2008, 03:25 PM
This may not be exactly what you want, but it does make the footer stick to the bottom.

http://www.wickham43.supanet.com/forumposts/alanmac081205.html

You say that you want the footer stick to the bottom of the page, and the content expand. but if your content div is 200px high with overflow: auto it will never expand; only the content below it in innercontainer with the pink background.

There is another method of making a footer stick to the bottom here:-
http://www.wickham43.supanet.com/tutorial/headerfooterfix.html