twitter bootstrap - CSS height: 100% not working in html or body -
i'm trying make content in page fill remaining screen size. page has header , content 2 divs, both needing scrollable. i've tried few solutions , best i've come using flexbox , using css calc set height. but height of flexbox still height of content. other answers said set body , html tags height 100%. doesn't work either, , inspect page height not being inherited. suspect may problem, don't know answer be. i'm using bootstrap , using box-sizing fix issues has bootstrap, may issue. my flexbox css: html, body { height: 100%; /* setting height: 100vh doesn't work either height: 100vh; */ margin: 0 } body { background: none repeat scroll 0 0; padding-top: 105px; } /* header 102px high , using calc set remaining height */ .flex-box { display: flex; height: -moz-calc(100% - 102px); height: -webkit-calc(100% - 102px); height: calc(100% - 102px); } .left { flex: 1; order: 1; overflow: auto; backg...