tags:

views:

207

answers:

6
+3  Q: 

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

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"&gt;
<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>
+4  A: 

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.

D_N  2010-03-12 04:50:33
what about Fluid wrt a container and not to entire browser window ? check my code below ....
Salvin Francis  2010-03-12 07:21:20
dude! i too assumed 2 of the 4 edges would be ignored..that's crazy cool.
Mark  2010-03-12 08:17:10
Yeah, it was a mindwarp when I first read about it. Yay for A List Apart.
D_N  2010-03-12 08:27:48
:) @Update, .fullcontainer cannot be modified for other reasons, FOA there is no such thing in my real code, its generated on-the-fly tag attached to document object without any id/class and i do not have access to that code.The overflow:auto and position:relative are embedded styles
Salvin Francis  2010-03-12 09:06:09
@Salvin Ah, that's a pain. An all-too-familiar one. If you can shimmy in an extra div around everything, including the header, you should be able to use conflicting absolutes to duplicate the dimensions of .fullcontainer and set overflow:hidden, and then, since it will be absolutely positioned and you can give it whatever styles you want, you should be able to defeat the IE6 problem (which most likely has to do with the box model and not positioning per se).
D_N  2010-03-12 09:22:22
Adding an extra container just for IE6 ?hmm....
Salvin Francis  2010-03-12 09:51:31
@Salvin, yeah, I know. But without an ID or way to narrow down your selectors so you get the right div, it might just be your best shot. If you can get to .fullcontainer with something like #someID > div > div (which IE6 won't understand) you can always go #someID div div {some:rule} and then #someID div div div {some:opposite-rule} to simulate the same thing. At this point it sounds like a question of cruft in your CSS or cruft in your HTML.
D_N  2010-03-12 09:57:28
(This is assuming you've implemented expressions and removed the height:100% + padding that will give you scrollbars, and searched and nixed any unneeded margins/padding from the offending divs [as IE6 has those handy box model bugs].)
D_N  2010-03-12 10:05:25
+2  A: 

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.

Tom  2010-03-12 04:51:50
Downvote? Really?
Tom  2010-03-12 04:54:08
Adding position:fixed will take it out of flow, and will not give the bottom div individual scrollbars.
D_N  2010-03-12 04:54:48
How exactly does it take anything out of the flow? The header will float over the bottom content, and there's no need for additional scrollbars on the bottom div.
Tom  2010-03-12 04:55:49
Any declaration of position:fixed takes it out of flow: it's absolutely positioned relative to the browser window. You'll need some fix that offsets the bottom div as much as the top is tall.
D_N  2010-03-12 04:58:26
I also take the OP to mean they want internal scrollbars.
D_N  2010-03-12 04:59:08
Agree that OP has mentioned internal scrollbars, but note that I do use the word "simulate". It's not clear whether that's a strict requirement.
Tom  2010-03-12 05:00:48
Though you did say 'simulate'. If you edit your answer (maybe to make clearer what they'll end up with?), SO will let me take off the downvote.
D_N  2010-03-12 05:00:53
Now you're just getting silly.
Tom  2010-03-12 05:01:49
..how's that? Let the downvote ride, I don't care. Just wanted to recognize I based my vote on something you excused yourself from in your answer.
D_N  2010-03-12 05:03:17
I like a good downvote every now and then :)
Tom  2010-03-12 05:05:17
dont worry tom,i will give a upvote,btw guys check my code below ...
Salvin Francis  2010-03-12 07:22:32
+1  A: 

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}
Farid  2010-03-12 05:22:03
A: 

Here is a great example of this: http://www.dynamicdrive.com/style/layouts/item/css-top-frame-layout/

ssergei  2010-03-12 05:27:02
its not the entire browser window.
Salvin Francis  2010-03-12 07:43:24
Yes it is... this represents exactly what you are asking for. the blue header at the top stays fixed and only the bottom is scrollable.
ssergei  2010-03-12 08:07:45
:) I made my code based on that.it does not work in IE6
Salvin Francis  2010-03-12 08:12:10
+1  A: 

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>
ZX12R  2010-03-12 05:31:03
Minor nitpick: Your margin in the body tag could just be written "margin: 0". Much simpler and easier to read.
Marc B  2010-03-12 05:42:15
oh...yeah thanks.
ZX12R  2010-03-12 06:47:57
check source code...
Salvin Francis  2010-03-12 07:46:26
A: 

sorry guys, it didnt work, this is what i tried based on solution above:

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

    /*-- Can only modify these --*/
    .header
    {
        height:40px;
        background-color:#eeeeee;
    }
    .content
    {
        overflow:auto;
    }
    .contentContainer
    {
        height: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>

No, i cant change the "fullContainer"'s style, its part of existing code.

problems:

  1. IE6: fullContainer has scrollbars

  2. IE7: fullContainer has 1 vertical scrollbar, content has vertical and horizontal scrollbars

  3. Firefox:fullContainer has 1 vertical scrollbar, content has horizontal scrollbar

  4. chrome:fullContainer has 1 vertical scrollbar, content has horizontal scrollbar

I do not want fullContainer to have scrollbars. It has overflow auto, so i have to be careful my content does not extend it.

Salvin Francis  2010-03-12 07:15:02
In simple words i have a container (called fullContainer) within which i can play and set my code.contentContainer was my idea, but it still does not solve anything.
Salvin Francis  2010-03-12 07:19:09
This should really go in your question as a tacked-on edit--not as an answer. It is very helpful for people to have.
D_N  2010-03-12 07:29:33

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?