CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
anthony88guy
Forum Contributor
Posts: 246
Joined: Thu Jan 20, 2005 8:22 pm

CSS

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

container div with header div and scrollable div inside..
anthony88guy
Forum Contributor
Posts: 246
Joined: Thu Jan 20, 2005 8:22 pm

Post 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.
Post Reply