100% height responsive sidebar

Question

How do i go about setting up a full height side bar using a responsive grid system, that is similar to bootstrap?

The issues I am running it to is the .main wrapper div collapses to the height of the .primarycol div.

I 'm using pull and push classes to adjust the visual layout so the .secondarycol div looks like its on the left hand side, even though it is after the .primarycol div in the code.

<div id="main" class="main content">
<div class="row">
<div id="primarycolumn" class="primarycol col12 col9-768 col3-768-push" role="main"></div>
<div id="secondary" class="secondarycol col12 col3-768 col9-768-pull col7-1024-pull" role="complementary"></div>
</div>
</div>

Normally the without the .secondarycol` class, the div would and look like this.

I have tried adding min-height:100% to the .main div and height:100% to the body tag, but that makes the main div height only ever be the height of the browser window and not the content.

Any suggestions on how I can remedy this would be really welcome.

This is the codepen of my base structure. http://codepen.io/onebitrocket/pen/ZYQLMm/

I've added in the third column as well as some pages require one.

The column system is based on bootstraps, but i think it's an improved version: The column classes are declared from smallest size to largest size. I've also changed the class names to indicate the breakpoint size rather then xs,sm,md,lr etc..

Thanks

Answer 1

Fixed, thanks to everyone for the suggestions

I've added the following to the css height:100% to body min-height:100% to .main overflow:-y: auto to .secondarycol

I've updated the codepen - http://codepen.io/onebitrocket/pen/ZYQLMm/