100% height divs in bootstrap

Question

I have this piece of code with bootstrap...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10">
            <div class="panel panel-info">
                <div class="panel-heading">CHAT</div>
                <div class="panel-body">text</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="panel panel-primary">
                <div class="panel-heading">ONLINE</div>
                <div class="panel-body">text</div>
            </div>
        </div>
    </div>
</div>

I need to have the columns be 100% height and panels in that columns be 100% also.

Thanks for ur help.

You need `jQuery` read my answer. Hope it helps you. – jofftiquez May 09 '15 at 03:00 — jofftiquez, May 09 '15 at 03:00

score 0 · Answer 1 · answered May 08 '15 at 21:20

0

If you have set the height of the class to 100% and it does not seem to make a difference, make sure it's parent object (ex. body or HTML) are also set to be 100%

answered May 08 '15 at 21:20

Eliseo

316
6
17

Set all to 100% make it to be more than 100% height. It makes page to be scrollable.. :/ – Jelean Thomas May 08 '15 at 21:26
Well perhaps the 100vh works instead, however in my experience I had to use less than 100vh (not sure what vh stands for but I assume its video height). So for my web forms I use 90vh and it avoids the scrollable issue. If you are getting a scroll bar then perhaps some of the objects inside the div are too big, or are adapting to the height (give objects within the div fixed heights in pixels, or if not make sure the summation of all the objects add up to 100%). – Eliseo May 10 '15 at 19:06

score 0 · Answer 2 · answered May 09 '15 at 02:59

Here is something that might help you.

Live sample HERE

HTML

<div class="your-div">
    // Contents
</div>

CSS

.your-div {
    background-color: #ccc;
}

JS

//Gets the current height of the screen.
var screenHeight = $(window).height(); 
var yourDiv = $('.your-div');

// Assign that height to the .row
yourDiv.css({
    'height': screenHeight + 'px',
});

// This makes the div's height responsive when you resize the screen or the window of the browser.
$(window).resize(function () {
    screenHeight = $(window).height();
    yourDiv.css({
        'height': screenHeight + 'px',
    });
});

Live sample HERE

score -1 · Answer 3 · answered May 08 '15 at 21:16

-1

Have you tried:

 .row {
   min-height: 100vh; }

answered May 08 '15 at 21:16

CaseyHunt

535
1
4
17

100% height divs in bootstrap

3 Answers3