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

https://stackoverflow.com/questions/13206116

30-07-2021
|

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>

Solution

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

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow