Bootstrap panel body 100% height of parent div

[manju.reddys]

I want to design the layout with 100% height of the viewport (minus header height: 70px;).

I’m able to achieve the outer layout, [see pen] (http://codepen.io/anon/pen/MKberp) here and I want the panel’s body also to be extend to 100% height through css (responsive).

I’m using bootstrap 3.3.6 and targeted browsers are IE11+ and latest browser’s.

Please help me how I can achieve this? [I tried] (http://www.bootply.com/BZQYq01ABC) but didn’t help

[Atelierbram]

If using the latest browsers, I guess one could use the viewport-unit vh in combination with calc, and maybe give that page-header and page-footer a fixed height.

.panel-body {
  /* height: 480px; */
  height: calc(100vh - 200px);
  overflow-y: auto; 
}

http://codepen.io/atelierbram/pen/RroyxW

[Author]

Posts