CODEWITHSUNDEEP
htmlcss
Calaf
Calaf

Reputation: 10817

Fullscreen CSS: 100vh DIVs wholly inside their parent DIV

I get this almost-good

split 100vh

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.

Upvotes: 0

Views: 488

Answers (2)

Ryan Leach
Ryan Leach

Reputation: 4470

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.

Upvotes: 0

Joe Fitzsimmons
Joe Fitzsimmons

Reputation: 1063

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);

Upvotes: 1

Related Questions