The height of the sidebar does not change with the height of the contents

advertisements

This is how the sidebar looks like at its' beginning stage: http://i.imgur.com/RE1bFdt.png

And there is no problem while the content fits the original page size: http://i.imgur.com/gWZNUOo.png

But once the columns are place under one another, the sidebar height remains the same leaving empty space at the bottom: http://i.imgur.com/lKY8L94.png

The sidebar is place inside the wrap:

#wrap {width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0}
.sidebar {width: 200px; height: 100%; float: left; background: #65A973; position: relative; bottom: 0px}

Some html

    <div id='wrap'>
        <div class='sideBar'>
           //something goes here
        </div>
        <div id='content'>
           //something goes here
        </div>
        <div class='clear'></div>
    </div>


This to formalise my comment into an answer:

I suggest using position:fixed; for the following CSS for the sidebar:

#sidebar {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:[some width];
}

Now make sure to increase the margin for the rest of your contents so that they don't disappear behind the sidebar:

#contents {
    margin-left:[sidebar width + normal margin];
}

Do note that you can no longer scroll inside the sidebar now, but scrolling on the rest of the page stays intact.