CODEWITHSUNDEEP
csstwitter-bootstrap-3
skeniver
skeniver

Reputation: 2647

Bootstrap 3 responsive height

I am using Bootstrap 3 to show some panels on a page, but I would like the panel body to have a height of 100% on a page, but my CSS knowledge apparently isn't up to scratch.

If I specify a height (like 100px), then it's gets height, but it isn't responsive.

Does anybody know how I could do this?

I have a JSFiddle of my set up here: http://jsfiddle.net/skeniver/47CZ6/5/

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            Heading
        </div>
        <div class="panel-body">
        </div>
    </div>
</div>

Upvotes: 0

Views: 5184

Answers (3)

Tan Hong Tat
Tan Hong Tat

Reputation: 6864

Try this. This doesn't overwrite your Bootstrap base CSS.

http://jsfiddle.net/YzHu4/

HTML

<div class="container m100">
    <div class="panel panel-default m100">
        <div class="panel-heading">
            Heading
        </div>
        <div class="panel-body m100">            
        </div>
    </div>
</div>

CSS

html,body{height:100%;}
.m100 {
    height:100%;
    min-height:100%;
}

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362380

Any panel containers also need to be 100% height -- body,html and .container:

html,body {
    height:100%;
}

.container,.panel {
    height:100%;
}

Demo: http://bootply.com/111090

Upvotes: 0

Steve Davidson
Steve Davidson

Reputation: 44

In the CSS set the height to 100% rather than 100px

.panel-body {height:100%;}

Upvotes: 0

Related Questions