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?
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>