Adjust grid height to available screen without scrollbar

Question

What grid property should I use to keep the grid perfectly inside the screen?

Using height: 100vh; on .wrapper adjusts the height, but it introduces the scrollbars. To remove the unwanted scrollbars, I tried setting body{margin:0;} but I want to have a margin surrounding the entire grid without producing the scrollbars. I'm sure this is an easy fix, but please help me!

Codepen: https://codepen.io/reiallenramos/pen/yzroxe

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: lightcyan;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  height: 100vh;
}

.wrapper>div {
  background-color: #eee;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.item1 {
  grid-column: 1/2;
  grid-row: 1/5;
}

.item2 {
  grid-column: 2/3;
  grid-row: 1/3;
}

.item3 {
  grid-column: 3/5;
  grid-row: 1/3;
}

.item4 {
  grid-column: 2/4;
  grid-row: 3/5;
}

.item5 {
  grid-column: 4/5;
  grid-row: 3/6;
}

.item6 {
  grid-column: 1/3;
  grid-row: 5/7;
}

.item7 {
  grid-column: 3/4;
  grid-row: 5/7;
}

.item8 {
  grid-column: 4/5;
  grid-row: 6/7;
}

<div class="wrapper">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
</div>

Michael Benjamin · Accepted Answer · 2017-10-22T12:37:41.050

Major browsers normally set a default margin on the body element. It's usually 8px, as recommended by the W3C.

Therefore, when setting the body element or another container to height: 100%, a vertical scrollbar will render because there is an overflow condition:

100% + 8px > the viewport height

The simple workaround is to override the browser's default rule with your own:

body { margin: 0; }

However, in this case, you want the gap around the main container. You don't want the scrollbar.

Then simply replace margin with padding, and use box-sizing: border-box.

With box-sizing: border-box, padding and borders (but not margins) are factored into the content length.

body {
  margin: 0;
  background-color: lightcyan;
}

/* NEW */
* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  padding: 8px; /* NEW */
  height: 100vh;
}

.wrapper>div {
  background-color: #eee;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.item1 {
  grid-column: 1/2;
  grid-row: 1/5;
}

.item2 {
  grid-column: 2/3;
  grid-row: 1/3;
}

.item3 {
  grid-column: 3/5;
  grid-row: 1/3;
}

.item4 {
  grid-column: 2/4;
  grid-row: 3/5;
}

.item5 {
  grid-column: 4/5;
  grid-row: 3/6;
}

.item6 {
  grid-column: 1/3;
  grid-row: 5/7;
}

.item7 {
  grid-column: 3/4;
  grid-row: 5/7;
}

.item8 {
  grid-column: 4/5;
  grid-row: 6/7;
}

<div class="wrapper">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
</div>

this works like magic! But what does the `*` in `* { box-sizing: border-box;}` mean? I'm new to webdev and this is my first encounter of it. — reiallenramos, Oct 23 '17 at 02:46
The asterisk (`*`) is the universal selector. It means that the rule applies to all elements. https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors — Michael Benjamin, Oct 23 '17 at 02:49

score 1 · Answer 2 · answered Oct 22 '17 at 06:59

1

Other than setting the margin on html, body, to 0, the only thing I found that would work is this:

html, body {
  height: 96vh;
}

answered Oct 22 '17 at 06:59

Xavier

130
1
8

thanks for the idea. 96vh produces too much "margin" on the bottom, so I'll use 98vh for now. Still waiting for other ideas – reiallenramos Oct 22 '17 at 07:06

score 1 · Answer 3 · answered Oct 22 '17 at 07:09

1

You have to subtract extra margin from your wrapper

calc(100vh - 16px)

No need to use 100% on body then.

answered Oct 22 '17 at 07:09

Rohit Verma

299
1
8

is it 16 because of 8 default margin on top and bottom? thanks for this. I can just write a formula for determining that extra margin to avoid magic numbers. – reiallenramos Oct 22 '17 at 07:13

Adjust grid height to available screen without scrollbar

3 Answers3

Linked