How can I achieve layout _without_ IE expressions?
Jeff
There is a simple layout that I use throughout my pages:
Header
Content
Footer
Where the header and footer are fixed size and the Content fills all remaining space in the page. If the user stretches the window,
the Content grows. If they shrink the window, the Content shrinks.
I acheive this in IE by using and expression to set the Content regions height as follows:
<style>
#head, #foot { height: 20px; }
#content { height: expression((document.documentElement.clientHeight-40)+'px');
</style>
<div id="head">...</div>
<div id="content">...</div>
<div id="foot">...</div>
Questions:
1. How can I achieve this layout _without_ expressions in Mozilla?
2. Is there a standards-compliant way to get this layout that works in both IE6 and Mozilla?
cheers and thank you in advance for any help,
- Jeff
Laurens Holst
> There is a simple layout that I use throughout my pages:
>
> Header
> Content
> Footer
>
> Where the header and footer are fixed size and the Content fills all
> remaining space in the page. If the user stretches the window, the
> Content grows. If they shrink the window, the Content shrinks.
>
> 1. How can I achieve this layout _without_ expressions in Mozilla?
> 2. Is there a standards-compliant way to get this layout that
> works in both IE6 and Mozilla?
Ouch, difficult... horizontal offsets aren't CSS its strongest points.
What about... um... (*thinks hard*)...
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>stretch</title>
<style type="text/css" id="internalStyle">
html, body {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
}
/*
* IE hack - IE doesn't know min-height but does incorrectly interpret
* height, effectively causing the same effect as min-height should in
* this case. Uses IE's root ghost hack to only apply to IE.
*/
* html body {
height: 100%;
}
#head, #foot {
position: absolute;
height: 20px;
width: 100%;
}
#head {
top: 0;
background: #CCCCFF;
}
#foot {
bottom: 0;
background: #CCFFCC;
}
#content {
padding: 20px 0px;
}
</style>
</head>
<body>
<div id="head">...</div>
<div id="content">...</div>
<div id="foot">...</div>
</body>
</html>
Seems to work :).
Cheers,
~Grauw
--
Ushiko-san! Kimi wa doushite, Ushiko-san!!