css - 100% height responsive sidebar -
how go setting full height side bar using responsive grid system, similar bootstrap?
the issues running .main wrapper div collapses height of .primarycol div.
i 'm using pull , push classes adjust visual layout .secondarycol div looks on left hand side, though after .primarycol div in 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 without .secondarycol` class, div , this.

i have tried adding min-height:100% .main div , height:100% body tag, makes main div height ever height of browser window , not content.
any suggestions on how can remedy welcome.
this codepen of base structure. http://codepen.io/onebitrocket/pen/zyqlmm/
i've added in third column pages require one.
the column system based on bootstraps, think it's improved version: column classes declared smallest size largest size. i've changed class names indicate breakpoint size rather xs,sm,md,lr etc..
thanks
at least on chrome need set height on html tag too. try - http://jsfiddle.net/27kze60s/
html, body { height: 100%; }
Comments
Post a Comment