I have a webpage that has 2 main DIVs - a title div and a content div.
I want the title dive to always "stick to the top of the page and
not scroll, regardless of the size of the window. The content div
should have a scrollbar that sits underneath the title div. I have
some event handlers in Javascript that handle calculating the size of
the content div.
Everything works fine in IE/Firefox when I remove the DTD from my
document (quirks mode) but in standards mode I get the scrollbar for
the
whole window and both the content div and title div scroll. The code
is below. If you comment out the DOCTYPE line to render in qirks
mode you will see the behavior I want.
So my question is: how can I get this page to appear the same way in
standards mode and quirks mode?
Any help on this is greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Ti tle</title>
<style type="text/css">
.contentBody
{
font-weight: normal;
font-size: 10pt;
margin: 0px;
color: #000000;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff
}
</style>
<script type="text/javascript">
function Init()
{
if (window.addEven tListener)
{
// Mozilla/W3C
window.addEvent Listener('load' , handleResize, false);
window.addEvent Listener('resiz e', handleResize, false);
}
else if (window.attachE vent)
{
// IE
window.attachEv ent('onload', handleResize);
window.attachEv ent('onresize', handleResize);
}
}
function handleResize()
{
try {
var e = document.getEle mentById("eCont entDiv");
e.style.height = document.body.c lientHeight - eContentDiv.off setTop
+ "px";
e.style.width = document.body.c lientWidth + "px" ;
}
catch ( ex ) {
/**/
}
}
</script>
</head>
<body class="contentB ody" onload="Init(); ">
<form method="post" action="test.ht ml" id="frmMain">
<!-- banner -->
<div class="contentT itleBar" style="backgrou nd-color:#000099;
color:#FFFFFF; height:32px; width:100%; overflow:hidden ;">
<b>Title Content</b>
</div>
<!-- The Content DIV -->
<div id="eContentDiv " style="overflow :auto; width:100%;">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
</div>
</form>
</body>
</html>
