Menu
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>
644
In my previous answer, I was absolutely wrong (no pun intended), as you can't specify both top and bottom in IE6, neither both left and right. Moreover, you don't know the exact width and height of the content div, nor do you know them as a percentage of the viewport.
When I solved this, I put IE into quirks mode, to get the border-box box model (see also W3C spec). To use the same CSS rules for more standards compliant browser, you can use the box-sizing property (and variants). After doing this, the borders get inside the contents and you can push your contents down and to the right by specifying a border (width and style):
<!-- put IE in quirks mode -->
<!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>IE6 'frames'</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-khtml-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
#top {
position: absolute;
top: 0;
width: 100%;
background-color: #ddd;
height: 100px;
z-index: 2;
}
#left {
position: absolute;
left: 0;
border-top: 100px solid; /* move everything below #top */
background-color: #bbb;
width: 120px;
height: 100%;
overflow: hidden;
z-index: 1;
}
#main {
position: absolute;
border-top: 100px solid;
border-left: 120px solid;
width: 100%;
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="top">Title</div>
<div id="left">LeftNav</div>
<div id="main">
<p>
Lorem ipsum ...<br />
<!-- just copy above line many times -->
</p>
</div>
</body>
</html>
UPDATE: In IE >= 7 and more standards compliant browsers you can use position: fixed together with both top and bottom (et al.) rules. There is a way to get this frame-like appearance in IE6 in Standards Mode (or rather, Almost Standards Mode) using CSS expressions. This way, you can let the JScript engine calculate the correct values of width and height (added between conditional comments).
<!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>'Frames' using <div>s</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#top, #left, #main {
position: fixed;
overflow: hidden;
}
#top {
top: 0;
width: 100%;
background-color: #ddd;
height: 100px;
}
#left {
left: 0;
top: 100px; /* move everything below #top */
bottom: 0;
background-color: #bbb;
width: 120px;
}
#main {
top: 100px;
left: 120px;
bottom: 0;
right: 0;
overflow: auto;
}
</style>
<!--[if IE 6]>
<style>
#top, #left, #main {
position: absolute;
}
#left {
height: expression((m=document.documentElement.clientHeight-100)+'px');
}
#main {
height: expression((m=document.documentElement.clientHeight-100)+'px');
width: expression((m=document.documentElement.clientWidth-120)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="top">Title<br /></div>
<div id="left">LeftNav<br /></div>
<div id="main">
<p>
Lorem ipsum ...<br />
<!-- just copy above line many times -->
</p>
</div>
</body>
</html>
That said, I don't recommend this method. It will slow down the browsing experience of the already not too fast IE6 noticeably, as these expressions are evaluated many times.
Just one more sidenote: I suppose you'll use external style sheets (and scripts) in the end, but if you want to embed those inside an XHTML document, use “CDATA markers and comments appropriate for the script or style language used”, as David Dorward recommends.
191
This html should give you a bit of help but your probably going to have to fiddle with it to get it to work perfectly in ie6 (sorry I can't test in ie6 right now). The problem is happening because there is actually a scroll bar appearing on the html and body where you have overflow:hidden specified. You can take that off and set overflow to auto to actually see it occurring.
<!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>
<style type="text/css">
html
{
height:100%;
}
body
{
height:100%;
margin:0px;
padding:0px;
border-left:0px;
border-right:0px;
overflow:hidden;
}
#header
{
top:0px;
width:100%;
height:100px;
background-color:#dddddd;
position:absolute;
}
#content
{
top:100px;
bottom:0px;
width:100%;
overflow:auto;
position:absolute;
}
#wrapper
{
padding-left:125px;
}
div#left
{
background-color:#dddddd;
float:left;
width:120px;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="left"></div>
<div id="content">
<div id="wrapper">
<p>content</p>
<p>content</p>
</div>
</div>
</body>
</html>
http://www.cssplay.co.uk/layouts/frame.html
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
