Forum Moderators: not2easy
and
Maybe CSS4 or CSS5 will address this issue..
It is addressed already, just not by IE, but you can accomplish the effect with IE too, you just need to use it's unique "support" of the height and overflow properties. ;)
There is also already a way to make "child" divs "inherit" min-height (they don't really inherit but bear with me..), and again then in IE you can use it's height property to pass the inheritance through the chain too..
This particular scenario, imo, is where IE's supposedly "strict" mode fails us in a bigger way. In Quirks Mode we already know how to work around the box model if required, the 2 (Quirks & Strict) modes each have their different float-model problems so whichever you use needs learning but they can be worked with.
But this (what I'm about to show you..) just doesn't work in Strict..
First this basic mock up should work in compliant browsers only:
<!-- q -->
<!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>100% min-height with stretch capabilities</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
text-align: center;
height: 100%;
}#content {
position: relative;
min-height: 100%;
background: #eee;
margin: 0 auto;
width: 55em;
text-align: left;
}h4, p {margin: 0 12em; padding: 10px;}
#left, #right {
position: absolute;
width: 10em;
bottom: 0;
top: 0;
background: #fff;
border: 1px solid #777;
}#left {left: 1em;}
#right {right: 1em;}</style>
</head>
<body>
<div id="content">
<h4>I'm trying to have a div be a minimum of 100% of the browser window height, but stretch with content. And I want side columns to match the main contents height too!</h4>
<p>As ye can understan I'm the same's the lave fin it comes till relations, some's nae sae bad, some's aricht (like my uncle Marischal), an then again some o them are nae muckle eese ava. Noo fit I'm aboot tae tell ye is Gospel truth an nae twa wayes aboot it. It concerns a cousin o mine fa hid the misfortune tae dee early on this year (2002), but maybe afore I ging on tae speak aboot her, I micht hae a word or twa aboot my uncle Marischal. Noo there's a lad if ever there wis ane. He made a livin as a journalist, startin aff in Aiberdeen wi the ‘Bon Accord' I think it wis, fitever, that wis him yoked an fae there he gaed on till the ‘Courier‘ in Dundee an syne the ‘Express' in Glesca. He sailed oot tae India an wis the foreign correspondent oot there, for the ‘Express’ atween the wars.</p><div id="left">left content</div>
<div id="right">right conent</div></div>
</body>
</html>
Note the <!-- q --> at the top is my quick way to trigger Quirks mode any comment preceding the Doctype will do it, and this is quicker for testing than typing the xml declaration.. - <?xml version="1.0" encoding="iso-8859-1"?> - which would be the usual comment..
[note: we're viewing in a non-IE browser here]
now if you add more filler text to that the layout will stretch which is min-height in action ... and those side divs will expand too.. that's the bonus project for today ;)
The side divs here are not actually inheriting the height they are calculating it, you can't inherit from min-height.
but on this page [w3.org] it recommends how browsers should calculate the height of Absolutely Positioned Elements according to their containing block. The one we're using here is
No.5
'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'
Now the compliant browsers do this just fine.. but that leaves IE way behind in it's functionality.
without requiring the child divs just adding this:
/* hide from Mac \*/
* html #content {height: 100%;}
/* end hide */
to the CSS will make the content div (containing block) act the same in IE (both strict & quirks) as it does in the more compliant ones which if that's all you want is fairly easy {if you don't want to use a hack then it could be put into a conditional comment).
Now those child divs, wouldn't it be useful if we could them to work in IE too?
...well we can...but this is the bit that will only work if IE is in Quirks Mode.
expand the above hack so it looks like this.
/* hide from mac \*/
* html #content, * html #left, * html #right {height: 100%;}
/* end hide */
now we're passing the inheritance through to the side divs. In IE Quirks mode this works because the #content div has "incorrectly" stretched because it can't handle the overflow property correctly, so the left and right divs are becoming 100% of their parents (#content) height.
It doesn't work in Strict mode because although the #content div still looks like it is incorrectly overflowing it's container, it is doing a better job as far as what height it thinks it is... it still "thinks" it is only 100% (of the window) high therefore the side divs will only be this tall, unless content stretches them too.
Note I have used the "hide fom Mac" hack as I don't know how this will fare in IE/Mac.. but the reason for this post wasn't that this is a perfect solutiuon but that it is possible already. We don't have to wait for future versions of CSS, instead we have either to wait for IE to comply (which is going to be a very long time) or we can experiment and find workarounds for it the way we always have..
Have Fun whichever you decide :)
Suzy
yes "faux columns" using background graphics are another workaround, and a nice easy one which I like too, but they are best with fixed width designs..
my post certainly isn't meant only to be a workaround for any one scenario but more to show how by using workarounds for IE we can use some of the advanced CSS-P support that is available. :)
Suzy
Adam
I was a bit surprised, when Safari was released and I heard it didn't support min-height. I presume it will be be fixed in the next version and that it was just an oversight?
I do tend to think that people that work with the newer browsers are more "savvy" about upgrades though and hence I don't even test in older versions of newer browsers e.g. Opera 5/6, earlier Moz.. etc. as they have proven that even if they did have "bugs" they generally corrected them in later versions.. if only IE would take heed.. hehe :)
Suzy
this CSS works with the above example and this time it works in both Strict and Quirks.. :)
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
text-align: center;
height: 100%;
}#content {
position: relative;
min-height: 100%;
background: #eee;
margin: 0 auto;
width: 55em;
text-align: left;
height: expression(document.body.clientHeight + "px");
}h4, p {margin: 0 12em; padding: 10px;}
#left, #right {
position: absolute;
width: 10em;
bottom: 0px;
top: 0px;
background: #fff;
border: 1px solid #777;
height:expression(content.offsetHeight - 2 + "px");
}#left {left: 1em;}
#right {right: 1em;}
</style>
Suzy
PS: probably still doesn't work in Safari, but can anyone confirm what IE5/Mac thinks of it?
for those of you not familar with overflow-x/y its identical to the overflow property, except it targets each axis individually, and is IE specific
I was able to use these fixes in the same stylesheet, and have it work in both IE and mozilla, without special CSS hacks to hide some properties..
.ContentSection
{
height: expression(document.body.clientHeight - 125 + "px");
width: expression(document.body.clientWidth - 210 + "px"); background-color: #FF0000;
padding: 0px;
border: 0px;
overflow: auto;
overflow-x: hidden;
position: absolute;
top: 105px;
left: 210px;
bottom: 20px;
right: 0px;
}
-C
