Page 1 of 1
CSS
Posted: Thu Sep 22, 2005 10:43 pm
by anthony88guy
I’m trying to make a layout that has a top header of about 100px in height and 100% in width. Under that is the rest of the page in a overflow: auto style. This would only work if i define a height, I can’t do 100% because of the header, and all users use a different res.
My goal is to have a top header that stays there and have the main content underneath scrollable.
Any suggestions to achieve this layout?
Posted: Thu Sep 22, 2005 11:43 pm
by feyd
container div with header div and scrollable div inside..
Posted: Fri Sep 23, 2005 2:14 pm
by anthony88guy
Code: Select all
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#333333" style="margin: 0px;">
<div style="width: 100%;">
<div style="width: 100%; height: 8%; background-color: #333333; border-bottom: 5px solid #000000;" align="center">
<font size="6">HEADER</font></div>
<div style="width: 100%; height: 90%; background-color: #666666; overflow: auto;">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>
</body>
</html>
The reason for the missing 2% in height is because it would introduce a full window scroll, plus the selected area with a scroll.
This works in fire fox but you cant scroll with the wheel. In IE its all messed up, doesn’t want to keep the header at the top.
Any ideas? I don’t want to use frames. Possibly something compatible with most browsers.