Home/ Questions/Q 7001053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T20:45:12+00:00

I’m trying to lay out a web page like this: |———————–| | header (fixed)

  • 0

I’m trying to lay out a web page like this:

|-----------------------|
| header (fixed)        | <- no scroll bar
|-----------------------|
| body                | |
|                     | |
|                     | | <- scroll bar
|                     | |
|                     | |
|                     | |
|                     | |
| ... continues ...   | |
| ... so requires ... | |
| ... scroll bar ...  | |
|---------------------|-|

In the old old days I’d have done this with a frameset. I don’t want to go that route for a few reasons (including it being deprecated).

In the not-as-old days I thought I’d done this using a height=100% table with two rows as the entire body of the page, and the overflow style set hidden/auto in different places to get the bottom row to have the scroll bar for the main page content. I’d be OK with this as a solution, but I can’t remember how to set it up right (I’m pretty sure it involves getting the right page elements set to position:relative or something, but I’ve been banging my head on the keyboard for two hours trying to get it to work so I give up).

I’ve read claims that anything you can do with frames/tables you can do with the right divs and css, so I’d really like to see someone show me that solution.

Also note: I only want the scroll bar to appear when needed based on the content (as per overflow:auto) not all the time (overflow:scroll).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a fully working solution to your problem scrollable content under an absolute positioned header with no other scrollbar on the browser window.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scrollable 100% high element</title>
<style type="text/css">
* {margin:0;padding:0}
p{margin:0 0 1em 0}
html,body{margin:0;padding:0}
body{
    height:100%;
}
html>body{
    position:absolute;
    width:100%;
}
#content{
    background:#d2da9c;
    overflow:auto;
    position:absolute;
    width:100%;

    left:0;
    top:100px;
    bottom:0;
}

#top{
    position:absolute;
    left:0;
    width:100%;
    top:0px;
    height:100px;
    background:red;
    overflow:hidden;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="content">
        <p>Start</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
<div id="top">
    <h1>Header</h1>
</div>
</body>
</html>
    • 0