Forum Moderators: not2easy
<!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.
I'm not fully sure I understand what you seek to do.
Do you want the footer to stick to the bottom of the window?
What do you want to happen when the content is shorter or larger than the space left in the window ?
Yes I want the footer to stick to the bottom of the window.
And the content to expand.
So the header will be a fixed size ( for the life of the page, but the content is generated at run time rather than desgign time so i cant set up the height in my design) It wold not have any scroll bars.
The footer is always shown and fixed at 25 px high.
The content would be shown with scroll bars if there wasnt enought screen real estate to show the whole content and the content div would expand if the window size is to change, but the header and footer wouold not change size.
Both I know will have serious issues with IE6 (can be solved if you accept javascript solutions to teach IE6 some more respect for standards)
The first is to use absolute positioning: basically you can set for every box you want on the screen its position using top, bottom, left and right. The boxes calculate their height and width based on that (or just use one of the positions in either direction and set the width for height). With overflow:scroll you can control which boxes get a scrollbar when their content grows too large for the size they get left with.
It works kinda good as long as you can live with the box and not the browser window getting the scrollbar.
The other is to use position:fixed on your footer to glue it to the viewport.
Next your content needs some padding and/or margin to make it clear the footer and scroll high enough. This method leaves the browser's scrollbar working and is overall simpler (but Ie6 has *no* native support fo position:fixed at all), so you will need soemthign like ie7.js for it.
I should have posted a few examples in the past out here. e.g.
[webmasterworld.com...]
If you can't find it, let me now what you want to explore further and we'll repeat something for you here.
I'll try and describe it clearer.
There are 3 parts to the page.
1. Header, which has unknown content at design time as it is populated with text at runtime. All the text must be displayed, no scroll bars.( I think height : 100% does this)
2. Content, the content should fill the page below the bottom of the header to the footer. if there is more text in the content that can be shown, then scroll bars should be available.
3. Footer. Footer should be 25px high and always sit at the bottom of the window.
Ok i realised that I might have made a couple of omissions.
The window is a popup andit should never have window scroll bars, it can be resized but no scrollbars. The contents scroll bars should be the only one available.
The content area should resize when resizing the window, but the footer stay the same, ie fixed to the bottom.
The widths would all be 100%
I've no direct idea how to get it so that the header can have a flexible height and the scrollbar be just on the content (not the header) without resorting to scripting.
[The problem is that I need to pin both bottom and top to get an absolutely positioned block to create scrollbars when I've no idea of the height.[
So, I'll presume the following html is the starting point:
<!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" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="headcontent">
<div class="header">
<h1>title</h1>
<p>explanation</p>
</div>
<div class="content">
<p>replace me with something long</p>
</div>
</div>
<p class="footer">I'm the footer</p>
</body>
</html>
I'm not going to look at it with IE, any version till it's done in the rest of the browsers I've access to. The reason is that I value my sanity and ability to do this fast ("fast" is relative as I type the explanations of the taught process)
First let's give the different elements a background color so we can see where they end up.
.headcontent {
background-color: orange;
}
.header {
background-color:yellow;
}
.content {
background-color:green;
}
.footer {
background-color:red;
}
using absolute positioning, let's put the footer at the bottom:
.footer {
height: 25px;
position: absolute;
bottom:0;
}
.footer {
left:0;
right:0;
padding: 0 10px;
}
On to the headcontent div. it's top will be at the top of the viewport, it's bottom at 25px from the bottom, and left and right can either be set individually or we could set width to 100%. I'll go for the 100% width to show some diversity (although in real world cases I'll probably not make things more complex for maintenance later on)
.headcontent {
position:absolute;
top:0;
bottom:25px;
width:100%;
}
Well now it all goes south if the content in the green box gets too large, so we'll set the overflow property for it:
.headcontent {
overflow:auto;
}
Basically all we need to do is remove the green background, use some nicer colors instead and format the stuff to look nice.
What we have at this point:
<!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" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.headcontent {
background-color: orange;
position:absolute;
top:0;
bottom:25px;
width:100%;
overflow:auto;
}
.header {
background-color:yellow;
padding: 0 10px 5px;
}
.content {
padding: 5px 10px;
}
.footer {
background-color:red;
height: 20px;
position: absolute;
bottom:0;
left:0;
right:0;
padding: 5px 10px 0 ;
}
</style>
</head>
<body>
<div class="headcontent">
<div class="header">
<h1>title</h1>
<p>explanation</p>
</div>
<div class="content">
<p>replace me with something long</p>
</div>
</div>
<p class="footer">I'm the footer</p>
</body>
</html>
Note that I reduced the height of the footer and added some vertical padding to keep the same overall ehight but make it look a bit nicer.
Validating the html, css: check!
Works in Firefox3, safari and opera: check!
Now the part I dread most: IE
IE7 first:
Seems to be working reasonably, (well there's one of IE7's bugs if you resize to switch the scrollbar on and off a few times that it forgets to redraw the title's background color where the scrollbar was, but there's not much we can do about that I'm afraid. And most normal users won't do that anyway.
So no conditional comment needed for IE7, unless somebody knows how to force IE7 to redraw the header on resizes that switch the scrollbar off.
IE6: now that's not going to be so easy as I've used setting both top and bottom on absolutely positioned elements (and IE6 isn't smart enough to calculate the height itself. I also used it in the width on the footer, so we lost both those things.
The easiest solution to gain it back is not to redesign it all for IE6, but to teach IE6 these things using the IE7.js script. It's far better than using a degraded solution.
That leads to:
<!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" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.headcontent {
background-color: orange;
position:absolute;
top:0;
bottom:25px;
width:100%;
overflow:auto;
}
.header {
background-color:yellow;
padding: 0 10px 5px;
}
.content {
padding: 5px 10px;
}
.footer {
background-color:red;
height: 20px;
position: absolute;
bottom:0;
left:0;
right:0;
padding: 5px 10px 0 ;
}
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="headcontent">
<div class="header">
<h1>title</h1>
<p>explanation</p>
</div>
<div class="content">
<p>replace me with something long</p>
</div>
</div>
<p class="footer">I'm the footer</p>
</body>
</html>
There is one thing that's not fixed: IE6 has rounding errors: it'll leave a 1px gap on some dimensions of the viewport under the footer. I don't know a fix for that.
Interesting is that the redraw problem under the scrollbar doesn't exist in IE6 once it has IE7.js.
Note that I do not need to test FF3, safari, opera etc. again after fixing IE as or the rest of the browsers this is merely a comment they'll happily ignore.
Enjoy!
Thanks for your help.
