CSS Grid does not fill entire viewport

Question

I am new to using CSS Grid. I have laid out a simple page with a grid layout and three divs. I set the grid (see the ".grid" class in the css code) to 100vh and 100vw, but when I view this in Firefox (version 56) it puts both vertical and horizontal scroll bars on the right and bottom, and the grid does not, in fact, fill the entire view screen.

Here is the html code:

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Welcome to Project</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body class="site">

<div class="grid">

<!-- ______________ -->

<div class="a">

<div class="a_left">

<div>Logo for Project</div>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

</div>
</div>

<!-- ______________ -->

<div class="b">This is grid-template-row b</div>

<div class="c">This is grid-template-row c</div>

</div>

<!-- ______________ -->

</body>
</html>

Here is the css code:

.grid {
display: grid;
grid-template-rows: 10% 35% 55%;
width: 100vw;
height: 100vh;
}

.grid > * {
background-color: darkgray;
color: white;
padding: 2em;
}

.a{
    display: grid;
    font-family: sans-serif;
    color: green;
    font-size: 16pt;
}

.a_left{
    display: flex;
    text-align: left;
    vertical-align: left;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.a_right{
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
    justify-content: right;
    vertical-align: right;
}

.b{
    display: grid;
    font-family: sans-serif;
    color: blue;
    font-size: 16pt;
}

.c{
    display: grid;
    font-family: sans-serif;
    color: black;
    font-size: 16pt;
}

li {
    display: inline;
}

site-nav{
    margin-top: 0px;
}

.topnav {
    align-content: right;
    justify-content: center;
    overflow: hidden;
    background-color: #333;
    height: 100%
}

.topnav a {
    float: left;
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}   

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.site{
    max-width: none;
    display: grid;
}

What else do I have to do to eliminate the scroll bars and have the grid fill the entire viewport?

Thanks for any help on this.

First of all, why are you still using FF56? Regardless, have you cleared the margin on the body? — jhpratt, Aug 13 '18 at 23:45
Thanks for your comment. This should not be different on FF56. What do you mean by "cleared the margin on the body" ? — RTC222, Aug 13 '18 at 23:47
No, I was just curious why you're on an old version. What I meant was setting the margin to 0. By default, there's some amount (10px by default I think) — jhpratt, Aug 13 '18 at 23:53
Set the margin to 0 in which class? the .site or the .grid class? Thanks. — RTC222, Aug 14 '18 at 00:00
The body. You haven't indicated that you're doing that, and there's a default margin. — jhpratt, Aug 14 '18 at 00:01
[`body {margin:0}`](https://jsfiddle.net/websiter/8cwp5g3r/) fixes your problem. — tao, Aug 14 '18 at 00:07

score 0 · Answer 1 · edited Aug 14 '18 at 00:23

0

Based on the comments above from jhpratt, here is the solution to the problem. Change the body css code to this:

body{
    background-color: black;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

Adding the margins to the body solved the problem.

edited Aug 14 '18 at 00:23

jhpratt

6,841
16
40
50

answered Aug 14 '18 at 00:07

RTC222

2,025
1
20
53

1

You should have answered my question in the comments, providing me the opportunity to answer your question. – jhpratt Aug 14 '18 at 00:08
Why the downvotes? This answers the question. – RTC222 Aug 14 '18 at 00:08
I did that as a complete answer because I can't properly format code in the comments. – RTC222 Aug 14 '18 at 00:09
Not sure you understand. By not answering my question as to whether or not you had this CSS already, you prevented me from properly answering the question. – jhpratt Aug 14 '18 at 00:10
Sorry, I guess I don't know that bit of etiquette. Thanks very much for your help on this. It solved the problem. However, if you post the answer I will select it as the best answer. – RTC222 Aug 14 '18 at 00:11
And now I can't answer it, as it has been closed. – jhpratt Aug 14 '18 at 00:13

CSS Grid does not fill entire viewport

1 Answers1