Home/ Questions/Q 8986189
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T21:29:30+00:00

Looking through this site, and others, I’ve not found a solution for this specific

  • 0

Looking through this site, and others, I’ve not found a solution for this specific matter. What I want to achieve could be best described after viewing the following example (also placed below):
http://jsfiddle.net/yev8/HRQB5/

The current situation:
In this example I have a left column (fixed width) and a right column (liquid width). In the right column there are four bars. The two bars aligned to the top are the same on every page. The two bars aligned to the bottom are different on every page, every combination of the two is possible. Now In the middle I have a div, “content”, which fills up the available space and, if necessary, has a vertical scrollbar.

What I want to achieve:
I would like the div’s scrollbar to be replaced with a scrollbar covering the whole page vertically, like the default scrollbar. When scrolling, the left menu and all the bars should not change their position. The only thing scrolling should be the middle content div.

I don’t know if this is possible, but in the ideal situation I would like to fix this with css only. If this is not possible, javascript (with or without jQuery) will work.

Can anyone give me any suggestions or point me in the right direction? I just can’t seem to get it to work the way I want.

My current html:

<!doctype html>
<html lang="nl">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title></title>
        <link href="css/stylesheet.css" rel="stylesheet" media="screen">
    </head>
    <body>
        <div id="wrapper">
            <div id="left">
                <ul>
                    <li><a href="#" title="">Menu item</a></li>
                    <li><a href="#" title="">Menu item</a></li>
                    <li><a href="#" title="">Menu item</a></li>
                </ul>
            </div>
            <div id="right">
                <div id="bar-1">bar-1</div>
                <div id="bar-2">bar-2</div>
                <div id="content">
                    <div style="height:400px;background-color:#ff0;"></div>
                    <div style="height:400px;background-color:#f0f;"></div>
                    <div style="height:400px;background-color:#0f0;"></div>
                    <div style="height:400px;background-color:#00f;"></div>
                </div>
                <div id="bar-3">bar-3</div>
                <div id="bar-4">bar-4</div>
            </div>
        </div>
    </body>
</html>

My current css:

html, body {
    height: 100%;
    background-color: #fff;
    color: #2f2f2f;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
}

div#wrapper {
    height: 100%;
    margin: auto;
    position: relative;
}

div#left {
    height: 100%;
    float: left;
    width: 256px;
    overflow-y: auto;
    background-color: #fcfcfc;
}

div#right {
    height: 100%;
    position: relative;
    margin-left: 256px;
}

    div#right div#bar-1 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        height: 64px;
        top: 0;
        background-color: #eaeaea;
    }

    div#right div#bar-2 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        top: 64px;
        height: 32px;
        background-color: #979797;
    }

    div#right div#content {
        position: absolute;
        left: 0;
        right: 0;
        top: 96px;
        bottom: 224px;
        overflow-y: scroll;
    }

    div#right div#bar-3 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 128px;
        height: 96px;
        background-color: #eaeaea;
    }

    div#right div#bar-4 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 128px;
        background-color: #d5d5d5;
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Do you mean something like this: http://jsfiddle.net/Y2spp/2/

    I added a padding to the content top and bottom according to the other bars.
    Make sure content is 100% height and the bars are on top of the content.

    Only CSS changes:

    div#right div#bar-1 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
    height: 64px;
    z-index:4;
    top: 0;
    background-color: #eaeaea;
}

div#right div#bar-2 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
    top: 64px;
    z-index:4;
    height: 32px;
    background-color: #979797;
}

div#right div#content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0px;
    padding-top:96px;
    padding-bottom:224px;
    overflow-y: scroll;
    z-index:2;
}

div#right div#bar-3 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
z-index:4;
    bottom: 128px;
    height: 96px;
    background-color: #eaeaea;
}

div#right div#bar-4 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
    z-index:4;
    bottom: 0;
    height: 128px;
    background-color: #d5d5d5;
}​
    • 0