Fullscreen CSS: 100vh DIVs wholly inside their parent DIV

Question

I get this almost-good

layout from the following code

<!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 {
            height: 100vh;
            min-height: 100%;
            border: 20px dashed gray;
        }
        .fullheight { min-height: 100%; }
        .left, .middle, .right { min-height: 100vh; }
        .left { border: 20px dashed red; }
        .middle { border: 20px dashed green; }
        .right { border: 20px dashed blue; }
    </style>
</head>
<body>
    <div class="container-fluid fullheight">
        <div class="row fullheight">
            <div class="left col-xs-4 col-md-4">
                <h2 class="text-center">Left</h2>
            </div>
            <div class="middle col-xs-4 col-md-4">
                <h2 class="text-center">Middle</h2>
            </div>
            <div class="right col-xs-4 col-md-4">
                <h2 class="text-center">Right</h2>
            </div>
        </div>
    </div>
</body>

which is a sequel to this question.

The answer is on the right track. I attempted to fix the last remaining issue, that the left/middle/right boxes exceed their own containing DIV.

The comment replied with

calc(100vh - 40px)

What does calc() in the context of a CSS file mean? Regardless: how do I avoid the apparition of the vertical scroll bar? Its presence implies that I am not remaining within 100vh in the first place.

score 1 · Answer 1 · answered Oct 09 '18 at 00:37

1

I'm guessing the border is pushing the height 40px outside it's container. You can make the border show inside your divs like this:

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

or, as the comment suggested, subtract 40px from the height like:

min-height: calc(100vh - 40px);

answered Oct 09 '18 at 00:37

Joe Fitzsimmons

1,043
1
8
22

A few comments: 1- I see. so calc() is in fact now (at least since 2012!) legal in CSS. 2- `box-sizing: border-box;` does not change the layout. 3- `min-height: calc(100vh - 40px);` does fix the issue. But it feels like it dodges the issue (to be strictly inside) by a performing a calculation. – Calaf Oct 09 '18 at 08:59

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

calc in this case is allowing you to use mixed units with ease, as you can calculate the exact value you need at render time.

Also take very careful note of

Division by zero results in an error being generated by the HTML parser.

The + and - operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as a percentage followed by a negative length — an invalid expression — while calc(50% - 8px) is a percentage followed by a subtraction operator and a length. Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage.

The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended.

Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.

It is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses.

The sections in bold have bitten me often.

Nice. Thanks. It's time to look at the "new" additions to CSS. — Calaf, Oct 09 '18 at 09:08

Fullscreen CSS: 100vh DIVs wholly inside their parent DIV

2 Answers2