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


This is how the sidebar looks like at its' beginning stage:

And there is no problem while the content fits the original page size:

But once the columns are place under one another, the sidebar height remains the same leaving empty space at the bottom:

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 id='content'>
           //something goes here
        <div class='clear'></div>

This to formalise my comment into an answer:

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

#sidebar {
    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.