CSS Grid Won't Fill Screen

Question

I know this is not a new issue, but no matter what I do, I can't get my grid to fill the screen. The page, which is very short, is at http://www.hymntime.com/tch/non/lang-idx-chooser.htm. Here are the grid specs:

#page-group {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows:  auto 1fr;
    column-gap: 1em;
    width: 100%;
    height: 100%;
    grid-auto-rows: auto;
}
#page-group-navigation {
    grid-column-start   : 1; 
    grid-column-end : 2; 
    grid-row-start  : 1; 
    grid-row-end    : 3; 
    background-color    : aliceblue;
    overflow        : scroll;
}
.page-group-header {
    grid-column-start   : 2; 
    grid-column-end : 3; 
    grid-row-start  : 1; 
    grid-row-end    : 2; 
    background-color    : aliceblue;
    margin-right        : 2em;
    text-align      : center;
}
#page-group-content {
    grid-column-start   : 2; 
    grid-column-end : 3; 
    grid-row-start  : 2; 
    grid-row-end    : 3; 
    margin-right        : 2em;
}

Firefox, Chrome (desktop & Android) & Edge all leave padding, even though the layout inspectors showing margins & padding to be zero.

Do page's scroll bars make it impossible to achieve full screen?

Add this to your code: `body { margin: 0 }`. See the duplicate for details. — Michael Benjamin, Aug 25 '19 at 00:40
The body { margin: 0 } did it! I knew it had to be something simple. Also, I feel dumb asking this, but where do I find the duplicate you refer to? — aksarben, Aug 25 '19 at 23:15

score 1 · Accepted Answer · answered Aug 24 '19 at 18:54

Use height 100% on html & body. Use min-height 100% on page wrapper (#page-group), all other stuff in this page wrapper.

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Choose Language</title>
<style>
html, body {
  height: 100%;
  margin: 0;
}
#page-group {
  min-height: 100%;
}
</style>
</head>
<body>
<div id="page-group">
  <div id="page-group-navigation">
  </div>
  <div id="page-group-content">
  </div>
</div>
</body>
</html>

CSS Grid Won't Fill Screen

1 Answers1