Forum Moderators: not2easy
At first I needed a div to fill the whole page. I know that to get this to work I need to set html and body both to 100% high. Did that, and this code works:
<!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></title>
<style type="text/css">
html{width:100%;height:100%;margin:0;padding:0}
body{width:100%;height:100%;margin:0;padding:0}
#w{width:100%;height:100%;margin:0;padding:0;background:#abcdef}
</style>
</head>
<body>
<div id="w"></div>
</body>
</html>
But my needs are a little bit different.
I need to have a header (#h) at the top of my page that's 90px high, then with a div below that that fills in the rest of the screen, basically 100%-90px.
I've been playing around, and came across a fix for ie, but I was hoping I might be able to get something that works in more browsers, especially firefox. Any ideas?
This is what I have now:
<!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></title>
<style type="text/css">
html{width:100%;height:100%;margin:0;padding:90px 0 0}
body{width:100%;height:100%;margin:0;padding:0}
#h{height:90px;width:100%;margin:0;padding:0;position:absolute;top:0;left:0;background:#abcdef}
#w{margin:0;padding:0;background:#fedcba}
</style>
</head>
<body>
<div id="h"></div>
<div id="w"></div>
</body>
</html>
The header would be a fixed height showing a header, designed for a liquid layout. It would only greacefully hide content in a very tight window size. So I'm not worried about that.
The rest of the body, the w for wrap, is set up to allow for panning, zooming in and zooming out, with its own set of controls, so that content will always be filling the screen, and/or too large for the screen. Both are fun.
But I know how to get the w div to be full screen, how can I adjust the css to allow for a static header.
Thanks
