CODEWITHSUNDEEP
htmlcsscross-browser
Salvin Francis
Salvin Francis

Reputation: 4267

How do i achieve the following in HTML?

I wish to have a page that has a fixed height (without scroll bars). Then underneath the header a fluid height div that does have a scroll bar(not the entire page). Also, the width is to be fluid on the entire page.

This is illustrated below: Image of layout involving fixed-height header followed by scrolling area http://img709.imageshack.us/img709/9242/tmphh.png

What should i do in HTML so that it works in all browsers including IE6 ?

EDIT: CODE CHANGED, works in IE6,Firefix,Chrome, However, IE6 shows 4 scrollbars !!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
    HTML,BODY
    {
        height:100%;
    }
    .fullContainer
    {
        width:80%;
        height:40%;
        overflow:auto;
        position:relative;
    }

    /*-- Can only modify these --*/
    .header
    {
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 

        height:40px;
        background-color:#eeeeee;
    }
    .content
    {
        position: absolute; 
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0;

        overflow:auto;
    }
    .contentContainer
    {
        height:100%;
    }
    * html .fullContainer{ /*IE6 hack*/
        padding: 40px 0 0 0;
    }
    * html .content{ /*IE6 hack*/
        height: 100%; 
        width: 100%; 
    }
    /*-- Can only modify these --*/
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div>before content...</div>
<div class="fullContainer">
    <div class="header">Header</div>
    <!-- <div class="contentContainer"> -->
        <div class="content">
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            <div style="width:1000px;background-color:#ccffcc;">long text</div>
        </div>
    <!-- </div> -->
</div>
<div>after content...</div>

</body>
</html>

Upvotes: 3

Views: 270

Answers (4)

user241244
user241244

Reputation:

Since you want internal scrolling on the bottom div, I'm assuming you want the bottom div to be fluid vertically (rather--fluid to browser window size, not to content) as well as horizontally. (Being fluid horizontally really doesn't have much to do with a any solution to a vertical offset.) And since that's the case, your header has to be a set height. If the bottom div doesn't need to be fluid vertically, you can just set height to the desired number and declare overflow-y:scroll.

For vertical fluidity, you'll need to use conflicting absolute positions, setting the bottom div to start just below where the top div ends and going down to the bottom of the page. Essentially:

#bottomDiv {
  position: absolute;    
  top: 100px; /* however tall your top div is */
  left: 0;
  right: 0;
  bottom: 0;
}

Note the expression you'll have to use for IE6 (laid out in the article linked to, above).

Update Why can't you modify .fullContainer? If it's just that that's in another stylesheet, try anyway. The way CSS works, you can override anything that's come before it. So, if in your editable area you can add a fullContainer rule (which you should be able to, if you're editing the CSS file at all), you very likely could redefine that div to get rid of the width and height declarations (width:auto and height:auto should do) and similarly reset or override other things (e.g., overflow:hidden if necessary).

The other option is to try to make both your desired (new) top and bottom divs use position:fixed, but note that fixed positions are notoriously buggy on some browsers, and you might want to avoid it as fragile for laying out your whole site.

Update 2 For IE6, you're using 100% height plus padding, which means it will be automatically too tall. In the article I point to, search for 'Creating the exception for IE5 and IE6' and use those expressions--if you can't put them in separate stylesheets, just use the star hack you're already using.

Upvotes: 4

ZX12R
ZX12R

Reputation: 4828

i think this should do the trick

<body style="margin:0;width:100%; height:100%; overflow:hidden;">
  <div id="HeaderDiv" style="width:100%; height:100px; overflow:hidden; float:left;">
  </div>
  <div id="FluidDiv" style="width:100%; height:100%; overflow:scroll; float:left;">
  </div>     
</body>

Upvotes: 1

Simon
Simon

Reputation: 950

Does this do it?

HTML

<body>
    <div id="header">

    </div>

    <div id="wrapper">

    </div>
</body>

CSS:

    *{padding:0;margin:0}
    body{overflow:hidden}
    #header,#wrapper{width:100%}
    #header{position:fixed;top:0;left:0;height:100px;background-color:#F00}
    #wrapper{position:fixed;height:100%;margin-top:100px;overflow:scroll}

Upvotes: 1

Tom
Tom

Reputation: 30698

An easy way to simulate this is to give the header component the following attribute:

div.header {position: fixed;}

And give the above div a fixed height, while not doing so for the bottom div.

Upvotes: 2

Related Questions