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