How I can to apply the yellow box's height how the blue box's height;
that height corresponds with Mozilla, or the Netscape to the HTML 's
height (rose),
with 5 IE or IE 6 it corresponds to the BODY's height (green). ?
Is sufficient that the yellow box's height is how HTML 's height
Even if I apply height=100% at yellow box , it considers as height
total only
the visual part of the browser (viewport) and not the part ' under '
viewport.
Thank you
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html {background-color: pink;
margin:0; padding:0;
}
body {background-color: green;
margin:0; padding:0;
}
#boxyellow
{height:100%;
position:relative;
background:yellow;
width:760px;
}
#boxblue {
position:absolute;
top:0;
left:80px;
width:160px;
background:blue;
}
</style>
</head>
<body>
<!-- yellow -->
<div id="boxyellow">
<ul>
<li> BB </li>
<li> BB </li>
</ul>
<!-- blue -->
<div id="boxblue">
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
</ul>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
</ul>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
</ul>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
</ul>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
</ul>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
</ul>
</div>
<!-- end blue -->
</div>
<!-- end yellow -->
</body>
</html>
