CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Reddy
Reddy

Reputation: 1453

Bootstrap panel body 100% height - flexbox

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 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 but didn't help.

Upvotes: 1

Views: 1204

Answers (2)

Rolly
Rolly

Reputation: 3375

You can do it with jquery - javascript

            $( window ).resize(function() {
                $( "div" ).css('height',($( window ).height()-70)+'px');
            });

Upvotes: 0

Andrew Axton
Andrew Axton

Reputation: 1030

The quickest (maybe not best) way I can think of is using viewport units and calc

height: calc(100vh - 70px);

Upvotes: 2

Related Questions