How to add headers to independently scrollable divs without pushing beyond height of window?

Question

I've found another post that gets me really close to what I'm looking for, but not all the way. (http://stackoverflow.com/questions/10474354/layout-with-fixed-header-and-footer-fixed-width-sidebar-and-flexible-content)

Essentially I want to add a header/title section to each scrollable area. These shouldn't scroll within their respective sections though. Here's the jsfiddle, and I've commented out the header sections. When they're added, it pushes the div beyond the height of the window, expanding the content. Any help is appreciated!

Here's original code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Application Wireframe</title>
<style type="text/css">
    body    {
        margin: 0;
        height: 100%;
    }

    #header {
        text-align: left;
        background: #4f0f00;
        color: #fff;
        width: 100%;
        margin: 0 0 0 0;
        border: 0;
        overflow: hidden;
        position: fixed;
    }
    #accountbar {
        background-color: #000000;
        color: white;
        height: 40px;
        width: 100%;
    }


    #contextbar {
        position:fixed;
        top:40px;
        width: 100%;
    }
    #leftheader {
        background-color: #66CCFF;
        height: 40px;
        width:200px;
        float:left;
    }
    #contentheader {
        background-color: #996600;
        color: white;
        height: 40px;
    }

    #middle {
        position:fixed;
        top:80px;
        width: 100%;
        height: 100%;
    }

    #left_col {
        float: left;
        width: 200px;
        /*height: 100%;*/
    }
    #left_col_wrap  {
        /*width: 100%;
        height: 100%;
        position: fixed;*/
    }
    #leftnav {
        background-color: #66FFFF;
        height: 100%;
        overflow: scroll;
        /*width: 200px;*/
    }

    #main_col   {
        /*margin-left: 200px;*/
        /*height: 100%;*/
    }
    #main_content_wrap  {
        /*position:fixed;
        width:100%;
        height: 100%;*/
    }
    #messagegap {
        background-color: white;
    }
    #contentpane {
        background-color: #FFAA00;
        height: 100%;
        overflow: scroll;
    }
    #contentfoot {
        background-color: #C80;
        height: 20px;
        position: fixed;
        width: 100%;
        bottom: 0;
        padding-bottom: 18px;
    }
    #footer {
        background-color: #CCCCCC;
        clear: left;
        width: 100%;
        position: fixed;
        bottom: 0;
    }
</style>
</head>
<body>
<div id="header">
    <div id="accountbar"><b>Account Bar</b> -always visible-this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="contextbar">
    <div id="leftheader"><b>Left Header</b></br>-usually says "Contents"-</div>
    <div id="contentheader"><b>Content Header</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="middle">
    <div id="left_col">
        <div id="left_col_wrap">
            <div id="leftnav"><b>Left Navigation</b>
                <ul>
                <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>  
    </div>
    <div id="main_col">

        <div id="main_content_wrap">
            <div id="contentpane"><b>Content Pane</b>
<p>Content Pane</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</p>
                <ul>
                    <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer"><b>Footer</b> -always visible, always at bottom of window-</div>
</body>
</html>

Here's the solution:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Application Wireframe</title>
<style type="text/css">
    body    {
        margin: 0;
        height: 100%;
    }

    #header {
        text-align: left;
        background: #4f0f00;
        color: #fff;
        width: 100%;
        margin: 0 0 0 0;
        border: 0;
        overflow: hidden;
        position: fixed;
    }
    #accountbar {
        background-color: #000000;
        color: white;
        height: 40px;
        width: 100%;
    }


    #contextbar {
        position:fixed;
        top:40px;
        width: 100%;
    }
    #leftheader {
        background-color: #66CCFF;
        height: 40px;
        width:200px;
        float:left;
    }
    #contentheader {
        background-color: #996600;
        color: white;
        height: 40px;
    }

    #middle {
        position:absolute;
        top:80px;
        width: 100%;
        overflow-y: visible;
        bottom: 8px;
        /*height: 100%;*/
    }

    #left_col {
        float: left;
        width: 200px;
        /*height: 100%;*/
    }
    #left_col_wrap  {
        /*width: 100%;
        height: 100%;
        position: fixed;*/
    }
    #leftnav {
        background-color: #66FFFF;
        height: 100%;
        overflow: scroll;
        /*width: 200px;*/
    }

    #main_col   {
        /*margin-left: 200px;*/
        /*height: 100%;*/
    }
    #main_content_wrap  {
        /*position:fixed;
        width:100%;
        height: 100%;*/
    }
    #messagegap {
        background-color: white;
    }
    #contentpane {
        background-color: #FFAA00;
        height: 100%;
        overflow: scroll;
    }
    #contentfoot {
        background-color: #C80;
        height: 20px;
        position: fixed;
        width: 100%;
        bottom: 0;
        padding-bottom: 18px;
    }



    #footer {
        background-color: #CCCCCC;
        clear: left;
        width: 100%;
        position: fixed;
        bottom: 0;
    }

</style>
</head>
<body>
<div id="header">
    <div id="accountbar"><b>Account Bar</b> -always visible-this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="contextbar">
    <div id="leftheader"><b>Left Header</b></br>-usually says "Contents"-</div>
    <div id="contentheader"><b>Content Header</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</div>
</div>
<div id="middle">
    <div id="left_col">
        <div id="left_col_wrap">
            <div id="leftnav"><b>Left Navigation</b>
                <ul>
                <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>  
    </div>
    <div id="main_col">
        <div id="main_content_wrap">
            <div id="contentpane"><b>Content Pane</b>
                <p>Content Pane</b> -always visible- this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this this is the main page -- everyone else stay thin so we can see this</p>
                <ul>
                    <p>
                    First</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    left</p>
                <p>
                    Last</p>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer"><b>Footer</b> -always visible, always at bottom of window-</div>
</body>
</html>

immayankmodi · Accepted Answer · 2012-11-07T16:35:23.587

For that you need to use position: fixed; I think you are looking for this.

HTML:

<div id="header">  Header Content    </div>

<div id="wrapper">

    <div id="leftheader"> Left Header   </div>

        <div id="leftwrapper">
                 ---CONTENT HERE---
        </div>        

    <div id="rightheader"> Right Header </div>

        <div id="rightwrapper">                     
                ---CONTENT HERE---
        </div>        
</div>

<div id="footer">   Footer Content    </div>

CSS:

<style type="text/css">
 div#header
 {position: fixed;left: 0px;top: 0px;height:100px;width:100%;background: black;color: White; }

  div#leftheader
  {position: fixed;left: 0px;top: 100px; height: 50px;width: 30%;float: left; background: red; color: White;    }

  div#leftwrapper
  {position: fixed;left: 0px;color: Maroon;margin-top: 150px;margin-left: 0;margin-bottom: 100px; width: 30%; min-width: 30%; height: 600px; max-height: 600px; overflow-y: auto;    }

  div#rightheader
  {position: fixed;left: 0px;top: 100px; height: 50px;width: 70%;margin-left: 30%;float: right;background: green;color: White;}

  div#rightwrapper
  {position: fixed;left: 0px;color: Purple;margin-left: 30%;margin-top: 150px;margin-bottom: 100px;width: 70%; min-width: 70%;height: 500px;max-height: 500px;overflow-y: auto; }

  /*div#wrapper
  {   height: 1000px;   }*/        

  div#footer
  {position: fixed;left: 0px;bottom: 0px; height: 100px;width: 100%;background: black;color: White;}
</style>

NOTE: I have only tested in Firefox.

Hope, it will helps you. Thanks And Keep Posting.

Cheers. !!

Not quite. The header, the left and right section headers, and the footer need to be fixed. — phdj, Nov 03 '12 at 16:57
@phdj see my edited answer. Is it okay ? Let me know ? If it helps you then mark it as answer so it will helps others to solve their problem. — immayankmodi, Nov 04 '12 at 05:18
Oh man Mack28, soooo close! I'm looking for the left section and right section to scroll independently. I really appreciate your help. Such a great community on here. — phdj, Nov 05 '12 at 17:14
Thanks Mack28, but the height of the middle div needs to readjust dynamically. I see that you've set the left and right content sections to fixed height, but that's not quite what I'm looking for. I've edited my question to show what I have. The only thing left to do is limit the "middle" div to stop short of the footer and that should solve my problem. Unfortunately, all the things I've tried break. Maybe you know what to do? — phdj, Nov 08 '12 at 23:49
Thanks for the help Mack28! I've finally figured it out and will update the post with my answer. — phdj, Nov 09 '12 at 20:00

score 1 · Answer 2 · answered Nov 04 '12 at 05:22

So I think what you're looking for is to have fixed headers within each of the scrollable divs? Well visually, that's the same as having fixed headers located at the top of the div. So long as the page itself doesn't scroll, this solution will work fine.

You would use position: fixed; to achieve this effect. The rest I assume you can do.

How to add headers to independently scrollable divs without pushing beyond height of window?

2 Answers2