I want to achieve a simple "frame" layout with fixed header, fixed left navigation area, and a main content area that fills 100% of the remainder of the viewport with scrollbars if necessary. My best attempt is below - but when I add enough content to the main div to force scrolling, I see that the scrollbar extends below the bottom of the viewport.
What am I doing wrong? Or what is IE6 doing wrong and how can I fix it?
NB please don't recommend using a more recent browser - I'd love to but can't.
Update 1 (for Matti and other purists!) - I have to live within real-world constraints of developing a web application for the head office of a group which needs to be accessed by users in over 100 subsidiaries, not all of which have upgraded to a modern browser. And some subsidiaries would love to use browser incompatibility as an excuse not to use the application imposed by head office!
Update 2
I'm an application developer, not a web designer, as is probably obvious. To date I have been using a DOCTYPE HTML 4.0 Transitional which I believe forces quirks mode in all IE version. However I recently tried adding the AjaxControlToolkit ModalPopupExtender, and this messes up my layout when the popup is displayed. Google suggested I need to use XHTML 1.0 to fix this (AjaxControlToolkit doesn't support quirks mode), and in fact I'm quite happy to move to cleaner CSS-based layout, but I do need my basic frame layout to work in IE6.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
html, body
{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
div
{
border:0;
margin:0;
padding:0;
}
div#top
{
background-color:#dddddd;
height:100px;
}
div#left
{
background-color:#dddddd;
float:left;
width:120px;
height:100%;
overflow:hidden;
}
div#main
{
height:100%;
overflow:auto;
}
</style>
</head>
<body>
<div id="top">Title</div>
<div id="left">LeftNav</div>
<div id="main">
Content
<p>
Lorem ipsum ...
</p>
... repeated several times to force vertical scroll...
<table><tr>
<td>ColumnContent</td>
... td repeated several times to force horizontal scroll...
<td>ColumnContent</td>
</tr></table>
</div>
</body>
</html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
