Bootstrap vertical responsiveness

Question

Without delegating width management to Bootstrap, I can get three full-height columns

with the following HTML/CSS.

<!DOCTYPE html>
<head>
    <style>
        div {
            position: fixed;
            border: 5px dashed blue;
            box-sizing: border-box;
        }
        .left {
            height: 100%; top:   0;
            width:  33%; left:   0;
        }
        .middle {
            height: 100%; top:    0;
            width:  33%; left:  33%;
        }
        .right {
            height: 100%; top: 0;
            width:  34%; left:  66%;
        }
        h2.text-center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="left">
        <h2 class="text-center">Left</h2>
    </div>
    <div class="middle">
        <h2 class="text-center">Middle</h2>
    </div>
    <div class="right">
        <h2 class="text-center">Right</h2></div>
    </div>
</body>

To let Bootstrap handle the widths, I wrote

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"
        href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <style>
        body {
            min-height: 100%;
            border: 3px solid green;
        }
        .fullheight {
            min-height: 100%;
            border: 3px solid blue;
            /* position: absolute; */
        }

    </style>
</head>
<body>
    <div class="container-fluid fullheight">
        <div class="row fullheight">
            <div class="col-xs-4 col-md-4">
                <h2 class="text-center">Left</h2>
            </div>
            <div class="col-xs-4 col-md-4">
                <h2 class="text-center">Middle</h2>
            </div>
            <div class="col-xs-4 col-md-4">
                <h2 class="text-center">Right</h2>
            </div>
        </div>
    </div>
</body>

Switching position to absolute does not work in combination with Bootstrap, and the other previous discussions on this issue (1, 2, 3, 4) do not help.

How do I set the height to 100% when the widths are managed by Bootstrap?

If there is a Bootstrap-way to set DIVs to 100% height, that would be even better.

Simply apply a `min-height` to bootstraps classes which has `100%` — roberrrt-s, Aug 30 '16 at 15:04
Leaving aside the opinion based nature of this question - http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Paulie_D, Aug 30 '16 at 15:07
@Roberrrt The class `.fullheight` in the second code above already does this. Could you elaborate on what you mean? — Calaf, Aug 30 '16 at 15:10
That's similar to what I do and I'm using Bootstrap, I see no guilt doing so. — Daniel Cheung, Aug 30 '16 at 15:12
@Paulie_D I revised the question to make what I'm seeking perfectly objective. — Calaf, Aug 30 '16 at 15:15
@Roberrrt That's it. Please move your comment to be an answer. If you can comment on why 100% works fine in the first example, but doesn't when using Bootstrap, please do. — Calaf, Sep 06 '16 at 02:35
Done so ;). It has to do with relativity, but i've answered it below + some sources — roberrrt-s, Sep 06 '16 at 07:52

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

How do I set the height to 100% when the widths are managed by Bootstrap?

I'm going to cite my friend James for this one:

There are a couple of relatively new CSS3 measurement units called:

Viewport-Percentage (or Viewport-Relative) Lengths.

https://stackoverflow.com/a/16837667/3305454

What do these 'viewport' units do?

Where normally, 100% is relative to the parent element, 100vh or 100vw do not respect their initial parents, but focus entirely on the users viewport, which is their exact screen. An example (also stolen from James):

<body style="height:100%">
    <div style="height:200px">
         <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height.

Your solution would be to apply this CSS rule to the elements:

.left, .middle, .right {
    min-height: 100vh;
}

Very good, but not perfect. If you then replace 3px with, say, 20px for the border thickness, you'll see that the frames protrude from the bottom. How can they be made to nest properly at the bottom (just like they do at the top)? — Calaf, Sep 06 '16 at 16:03
Oh, this doesnt work yet, bummer. HOWEVER: box-sizing: border-box; — roberrrt-s, Sep 06 '16 at 17:07

Bootstrap vertical responsiveness

1 Answers1

Linked

Bootstrap *vertical* responsiveness

1 Answers1

Linked

Bootstrap vertical responsiveness