Twitter Bootstrap 3 responsive full height grid

Question

First of all, sorry for my poor english :S. I want a responsive full height grid using bootstrap 3. My problem is the grid, I don't know how to set 100% height to container and the inside divs. Width is perfect but height :S.

I try with this CSS but it doesn't work:

html body .container-fluid{
min-height:100%;
height:100%;
}

.border3{
min-height:20%;
height:20%;
}

.border4{
min-height:20%;
height:20%;
}

.border5{
min-height:20%;
height:20%;
}

HTML+CSS: http://jsfiddle.net/z5dpu7od/1/

Maybe I can solve this problem with JavaScript. I can take the browser height and applied it to .container-fluid element but I want to try it with CSS only.

Thanks for your answer :).

Answer 1

Break up your content into row groups that you can use to set the height for each grouping. Height in css only works if the element's ancestors all have a height set. So, in the demo, you can see that I grouped your elements into three primary row groups: menus (which I set to 80% of the window/viewport height), the navigation links (which is set to 5%) and the brand (which is set to 15%). Doing this, allows you to then give the elements within those row groups heights in percentages as well. For example, the menu group has five nested rows which you can give equal heights by setting them each to height: 20%.

Demo

CSS:

html, body, .container-fluid {
    height:100%;
}
.menusrow {
    height: 80%;
}
.navrow {
    height: 5%;
}
.brandrow {
    height: 15%;
}
.menusrow .row {
    height: 20%;
}
.border1 {
    text-align: center;
    height: 100%;
}
.border2 {
    text-align: center;
    padding: 10px;
    background-color: red;
    border: 1px solid black;
    height: 100%;
}
.border3 {
    text-align: center;
    padding: 10px;
    background-color: green;
    border: 1px solid black;
    height: 100%;
}
.border4 {
    text-align: center;
    padding: 10px;
    background-color: orange;
    border: 1px solid black;
    height: 100%;
}
.border5 {
    text-align: center;
    padding: 10px;
    background-color: blue;
    border: 1px solid black;
    color: white;
    height: 100%;
}

HTML:

<div class="container-fluid">
    <div class="row menusrow">
        <div class="col-xs-12 col-md-6 border1">
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 1</div>
                <div class="col-xs-4 col-md-4 border4">MENU 2</div>
                <div class="col-xs-4 col-md-4 border5">MENU 3</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 4</div>
                <div class="col-xs-4 col-md-4 border4">MENU 5</div>
                <div class="col-xs-4 col-md-4 border5">MENU 6</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 7</div>
                <div class="col-xs-4 col-md-4 border4">MENU 8</div>
                <div class="col-xs-4 col-md-4 border5">MENU 9</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 10</div>
                <div class="col-xs-4 col-md-4 border4">MENU 11</div>
                <div class="col-xs-4 col-md-4 border5">MENU 12</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 13</div>
                <div class="col-xs-4 col-md-4 border4">MENU 14</div>
                <div class="col-xs-4 col-md-4 border5">MENU 15</div>
            </div>
        </div>
    </div>
    <div class="row navrow">
        <div class="col-xs-12 col-md-12" style="text-align:right;">EVENTS | CONTACT | ABOUT</div>
    </div>
    <div class="row brandrow">
        <div class="col-xs-12  col-md-6 border2">
             <h1>portada</h1>
        </div>
    </div>
</div>