CODEWITHSUNDEEP
htmlcssscrollbar
Chuck Wilbur
Chuck Wilbur

Reputation: 2620

How can I create the behavior of a two-frame horizontal-tiled frameset with divs/css?

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).

Upvotes: 2

Views: 279

Answers (2)

MadScientist
MadScientist

Reputation: 565

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>

Upvotes: 1

MadScientist
MadScientist

Reputation: 565

This is the simple way to do a fixed header it gets a little more complex when you want to do a fixed footer as well. This should work for you though.

<!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">
     body{
      margin:0;
      padding:0;
      position:relative;
     }
     body, html, #wrapper {
        height:100%;
        position:relative;
     }
     #header{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100px;
      background-color:yellow
     }
     #wrapper {
        height:100%;
        padding-top:100px;
     }
    #content{
        overflow:auto;
        height:100%;
    }

    </style>
    </head>
    <body>
    <div id="header"> header </div>
    <div id="wrapper">
        <div id="content"> 
            <p>content </p>

        </div>
    </div>
</body>
</html>

This one is a little better we just need to get rid of the spacing at the bottom to remove the far right scrollbar completely.

Upvotes: 1

Related Questions