Divs height adds up to 100 percent but scroll showing

Question

I'm attempting to do a very simple full-screen grid with CSS.

Here's only the relevant code:

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 0;
}

[class*='col-'] {
    display: inline-block;
    height: 100%;
    background-color: red;
}

.row-third {
    height: calc(100% / 3 - 1.333333333333333%);
}
.row-third:nth-child(n+2) {
    margin-top: 2%;
}

.col-third {
    width: calc(100% / 3 - 1.333333333333333%);
}
.col-third:nth-child(n+2) {
    margin-left: 2%;
}

<!DOCTYPE html>
<html>
 <head>
        <link rel="stylesheet" type="text/css" href="responsive.css"></link>
 </head>
 <body>
  <div class="row-third">
            <div class="col-third">

            </div>
            <div class="col-third">

            </div>
            <div class="col-third">

            </div>
        </div>
        <div class="row-third">
            <div class="col-third">

            </div>
            <div class="col-third">

            </div>
            <div class="col-third">

            </div>
        </div>
        <div class="row-third">
            <div class="col-third">

            </div>
            <div class="col-third">

            </div>
            <div class="col-third">

            </div>
        </div>
 </body>
</html>

The issue is that even though the total height of the 3 divs adds up to 100% the scrollbar appears. I don't want the scrollbar to show and overflow: hidden; would not fix things only hide the fact that the grid is going off-screen. Why would the grid be going off screen if it's supposed to be 100% in height?

I feel like I'm taking crazy pills.

Shouldn't it be `.row-third:nth-child(n+2) { margin-top: 1.333333333333333%; }`? — Turqueso, Mar 30 '16 at 20:15
@Turqueso The top margin is always 2%. I have other classes for smaller divs, like `quarter` and `fifth` and the top margin is always the same. The `1.333333333333333%` compensation in height on the other hand is only for the `third` class and is different for every other class. If you count the div heights they add up to 100%. — Alternatex, Mar 30 '16 at 20:21
it will never be 100% correct because you want to put 3 pieces in 100% is mean 100/3 =33.333333333333333333............. it never ends but in 99% it is ok like 99/3=3 or 99.99999/3=33.33333 — CodeWeis, Mar 30 '16 at 20:25
@DanyCode A difference of 0.000000000000001% will at most cause a 1px overflow/underflow. This is more than that. The `calc()` part is not what's causing the problem. — Alternatex, Mar 30 '16 at 20:33

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

I believe this is happening because margin % values are calculated against the width of the containing element, not the height (as you're anticipating).

See: Why are margin/padding percentages in CSS always calculated against width?

If you're working to space the rows out evenly to fill the height of the page, Flexbox is a great alternative. Check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edited May 23 '17 at 12:15

Community

1
1

answered Mar 30 '16 at 20:26

smrubin

551
6
13

Wow. Would've never expected that. Today I learned something. – Alternatex Mar 30 '16 at 20:36
Here's a quick codepen illustrating what I think you are trying to achieve using Flexbox: http://codepen.io/anon/pen/KzvxJv – smrubin Mar 30 '16 at 20:37
Brilliant! Thank you. – Alternatex Mar 30 '16 at 20:43

Divs height adds up to 100 percent but scroll showing

1 Answers1