Twitter Bootstrap 3 responsive full height grid

html css responsive-design twitter-bootstrap-3 fullscreen

55,518

Solution 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>

Solution 2

This can be solved with css, no need for javascript.

For 100% height you want to set the full hierarchy of containers to 100% height, from your innermost div, all the way to the <html> element.

To start with, your initial css should start with this:

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

Notice the comma between the elements, this is so that all of them have the height set to 100%. Instead of your version which only sets the .container-fluid to be 100% height.

Solution 3

It's difficult to know what you are trying to achieve, but this is what I would do with the design. One thing I use frequently is a small script to make responsive equal heights JQuery Match Height, it's for responsive equal heights.

SCRIPT: http://brm.io/jquery-match-height/

**DEMO: http://jsbin.com/depoq/1/****

enter image description here

Then it's applied like this:

$(document).ready(function () {
    /* ----------  equal height columns   -------- */
    $('.inner').matchHeight();
}); // end document ready

Then you need to add the class .inner (in this example) in the correct places.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-6 border1">
          <div class="inner">
            <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><!-- inner -->
            </div>
            <div class="row">
                <div class="col-xs-12 col-md-12" style="text-align:right;">EVENTS | CONTACT | ABOUT</div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 border2 inner">
             <h1>portada</h1></div>
    </div>
</div>

55,518

Author by

mrroot5

Full Stack developer, in love with JavaScript and Python, specially Django, with a high motivation ratio

Updated on August 10, 2020

Comments

mrroot5 over 3 years
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 :).
mrroot5 over 9 years

I tried this before but don't work. Thanks for your answer :).
mrroot5 over 9 years

I try something like @jme11 made. Two colums: 1.- Menu grid with 100% height. 2.- Brand img slider with 100% height (slider not implemented yet). In mobile I only need one column with 100% height and width.
mrroot5 over 9 years

So close. I will change the .menusrow to 100% height but i can't see the 2 columns: 1.- Menu grid with 100% height like you made. 2.- Brand img slider with 100% height (not implemented yet). With your code I only saw the menu grid :(. Thank you very much for your answer :).
jme11 over 9 years

Cool, if you have issues still, let me know here or you can always ask another question.
Andrei Dvoynos over 9 years

@erknrio It does work, and this is the way to do it. Show me the fiddle where you tried it so I can see what you did wrong.
mrroot5 over 9 years

jsfiddle.net/z5dpu7od/1 If I copy and paste your code in jsfiddle it doesn't work: html, body, .container-fluid{ height:100%; }
mrroot5 over 9 years

Hello again @jme11 I have one question: Why "col-md-6" doesn't work with your code? :S.
Andrei Dvoynos over 9 years

Read my full answer. I'm not saying copy and paste my code, I'm saying that's something to start with, you need more code to make it work, but you're willing to do some of it yourself no?
mrroot5 over 9 years

I am a noob on CSS for this reason I asked in stackoverflow. I try with my code to change the white space by comma but this doesn't work. @jme11 tell me to make new CSS for each row, not inside of my .border# classes and it works.
Parsa Mir Hassannia over 6 years

thank you it was really helpful for me . I have one question , if you shrink the browser vertically the boxes height will be smaller , is it ok to use min-height for boxes from shrinking a lot in smaller devices? any suggestion?