Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>C Frame Porthole</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><style type="text/css">
* {margin: 0; padding: 0;}
html, body {width: 100%; height: 100%; overflow: hidden;}
#header-div {position: absolute; top: 0px; height: 40px; left:0px; right: 0px; border: 1px solid #000;}
#body-div {position: absolute; top: 40px; bottom: 30px; left: 0; right: 0;}
#body-menu-div {position: absolute; top: 0px; bottom: 0px; left: 0; width: 200px; border: 1px solid #000;}
#body-content-div {position: absolute; top: 0px; bottom: 0px; right: 0; left: 201px; border: 1px solid #000; overflow: auto;}
#footer-div {position: absolute; bottom: 0px; height: 29px; left:0px; right: 0px; border: 1px solid #000;}
</style>
</head><body>
<div id="header-div">This is the header container</div>
<div id="body-div">
<div id="body-menu-div">This is the navagation container</div>
<div id="body-content-div">
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
content for scrolling div<br>
</div>
</div>
<div id="footer-div">This is the footer container</div>
</body>
</html>
(it tried it in Opera, and Safari for windows for you, and it works in those too)
And is there a reason for the #body-div? content div and menu div can still be positioned properly without it, making it unnecessary nesting.
[edited by: Xapti at 12:51 am (utc) on Aug. 7, 2007]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>title of page</title>
<meta http-equiv="content-type" content="text-html; charset=utf-8">
<style type="text/css">
*{padding:0;margin:0}
body, html{height:100%}
#header{height:100px;background-color:blue;position:relative;}
.spacer{height:100px;}
#big{height:100%;background-color:pink;margin-bottom:-100px;overflow:auto}
#footer{height:100px;background-color:red;position:relative;margin-right:16px}
</style>
</head>
<body>
<div id="big">
<div id="header">header</div>
<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<div class="spacer"></div>
</div>
<div id="footer">footer</div>
</body>
</html>
There are visible problems though in both the code and display. Not sure if there's improvements that can be made on it. For the side menu (not included), you would have to use faux columns.
The easiest way though, would of course be to just use percentage heights to total 100. The only downside is that when the window is small enough the header/footer content will scroll or overflow; and when the window is too big, there will be a bit of wasted space taken up by the header and footer.
