Forum Moderators: open
Oh, anyone have the answer to my original question? :)
- John
*Edit* - Because I know someone is going to post about this I am completely aware of the XML/quirks mode issue.
- John
<?xml version="1.0" encoding="UTF-8"?>
<!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>One Hundred Percent height Divs</title>
<!--[if true]>
<style type="text/css">
/* IE 5.0-6.0 */
body, html {
background: #000;
height: 100%; /* this is the key! */
margin: 4px 3px 0px 4px;
padding: 0;
overflow: hidden;
width: 100%;
}
#bodyouter {
background: #eee;
height: 99%; /* works only if parent container is assigned a height value */
left: 3;
border: #479 solid;
border-width: 40px 1px 1px 1px;
position: absolute;
top: 3;
width: 100%;
}
#bodyinner {
background: #ddd;
height: 100%; /* works only if parent container is assigned a height value */
width: 100%;
}
#content {
background: #ccc;
height: 100%; /* works only if parent container is assigned a height value */
overflow: auto;
width: 100%;
}
</style>
<!--[if true]>
<![endif]--><![if false]>
<style type="text/css">
/* IE4 */body, html {
background: #000;
height: 100%; /* this is the key! */
margin: 4px 3px 3px 4px;
padding: 0;
width: 100%;
}
#bodyouter {
background: #eee;
height: 100%; /* works only if parent container is assigned a height value */
left: 3;
border: #f0f solid;
border-width: 40px 1px 1px 1px;
position: absolute;
top: 3;
width: 100%;
}
#bodyinner {
background: #ddd;
height: 100%; /* works only if parent container is assigned a height value */
overflow: auto;
width: 100%;
}
#content {
background: #ccc;
height: 100%; /* works only if parent container is assigned a height value */
left: 0;
padding: 0;
position: absolute;
top: 0;
width: auto;
}</style>
<![endif]>
</head><body>
<div id="bodyouter">
<div id="bodyinner">
<div id="content">
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p>
</div><!-- /#content -->
</div><!-- /#bodyinner -->
</div><!-- /#bodyouter --></body>
</html>
[edited by: JAB_Creations at 7:15 pm (utc) on Sep. 20, 2007]
<!--[if IE 4]>
<style type="text/css">
/*<![CDATA[*/
YOUR CSS
/*]]>*/
</style>
<![endif]-->
and
<!--[if gte IE 5]>
<style type="text/css">
/*<![CDATA[*/
YOUR CSS
/*]]>*/
</style>
<![endif]-->
Anyone feel free to correct me if I am wrong.
Marshall
[msdn2.microsoft.com...]
The method I am using is served to Internet Explorer and will only apply on downlevel versions (less then 5.0).
- John
- John