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.

adding secondarycol class

<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.

enter image description here

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

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -