Fractional CSS Grid extends below viewport - css

Question

I just can't figure out why this grid I've set extends below the viewport.
Besides the logo-cell, the other two cells in the vertical grid are fractional. Basically, independent of viewport size, the footer section extends below the bottom of the viewport. I'd like the page to size itself so you don't have to scroll on desktop.
#import url('https://use.typekit.net/vlv0duo.css');
html {
overflow: hidden;
height: 100%;
}
body {
font-family: objektiv-mk1, sans-serif;
font-style: normal;
background-color: #141414;
color: #e5e5e5;
height: 100%;
overflow: auto;
margin: 0;
}
section {
display: grid;
grid-template-rows: calc(60px + 8vh) 1fr 1fr;
grid-template-columns: 1fr;
grid-gap: 0px 0px;
position: relative;
height: 100%;
margin: 2.6vw;
}
.nav {
margin-bottom: 8vh;
}
.icon-logo {
background: url(sub_logo-01.svg) no-repeat;
width: 150px;
height: 60px;
display: inline-block;
position: relative;
color: #e5e5e5;
}
h1 {
font-size: 34px;
font-weight: 200;
line-height: 49px;
text-align: Left;
max-width: 85%;
margin: 0 0 25px 0;
padding: 0;
}
h2 {
font-size: 18px;
font-weight: 300;
line-height: 26px;
text-align: Left;
max-width: 60%;
margin: 0 0 25px 0;
padding: 0;
}
h3 {
font-family: objektiv-mk1, sans-serif;
font-size: 12px;
line-height: 22px;
font-weight: 500;
margin: 0;
padding: 0;
}
a {
color: #e5e5e5;
text-decoration: none;
font-family: objektiv-mk1, sans-serif;
font-weight: 500;
}
a.body-link {
color: #e5e5e5;
text-decoration: none;
font-family: objektiv-mk1, sans-serif;
font-weight: 200;
}
a#header-link {
white-space: nowrap;
}
div.cell {
grid-column: span 1;
grid-row: span 1;
position: relative;
}
div.cell#text {
font-weight: 200;
font-size: 12px;
line-height: 18px;
}
div.cell {
grid-column: span 1;
grid-row: span 1;
position: relative;
}
div.cell#footer {
position: relative;
align-self: end;
}
div.footer {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 0px 50px;
}
div.mark {
font-weight: 200;
font-size: 12px;
line-height: 18px;
align-items: end;
grid-column: span 2;
grid-row: span 1;
}
div#social {
position: relative;
bottom: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
white-space: nowrap;
}
<section>
<div class="nav">
<a class="navlogo" href="www.relicstudio.co">
<div class="icon-logo"></div>
</a>
</div>
<div class="cell">
<h1>
An independent design studio.
<br><br> We use the past to inform the present, leveraging creative and strategic solutions to projects of all types and sizes.
</h1>
<h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus sollicitudin velit, sed porta lectus accumsan nec. Sed nec diam quis neque pretium tristique. Request Advance Work Samples
</h2>
</div>
<div class="cell" id="footer">
<div class="footer">
<div class="cell" id="text">
<h3 id="heading">
Capabilities
</h3>
<br>
<ul>
<li>Naming</li>
<li>Editorial</li>
<li>Packaging</li>
<li>Tone & Voice</li>
<li>Art Direction</li>
<li>Brand Strategy</li>
<li>Identity System</li>
<li>Interface Design</li>
<li>Experience Design</li>
<li>Environmental Design</li>
</ul>
</div>
<div class="cell" id="text">
<h3 id="heading">
New Business
</h3><br>
telegram#relicstudio.co
<div id="social">
<h3 id="heading">
Follow For The Latest
</h3><br>
<ul>
<li>twitter</li>
<li>instagram</li>
</ul>
</div>
</div>
</div>
</div>
</section>

Answer 1

Reworked/simplified your HTML/CSS to fix height issues. Demo:
#import url('https://use.typekit.net/vlv0duo.css');
/* to include padding and border in height */
* {
box-sizing: border-box;
}
body {
font-family: objektiv-mk1, sans-serif;
font-style: normal;
background-color: #141414;
color: #e5e5e5;
margin: 0;
/* set min-height to screen height */
min-height: 100vh;
/* now body is grid container instead of section */
display: grid;
/* set min-content for footer to be placed at the very bottom */
grid-template-rows: calc(60px + 8vh) 1fr min-content;
/* replace margin for section with padding for body */
padding: 2.6vw;
}
.nav {
margin-bottom: 8vh;
}
.icon-logo {
background: url(sub_logo-01.svg) no-repeat;
width: 150px;
height: 60px;
display: inline-block;
position: relative;
color: #e5e5e5;
}
h1 {
font-size: 34px;
font-weight: 200;
line-height: 49px;
text-align: left;
max-width: 85%;
margin: 0 0 25px 0;
padding: 0;
}
h2 {
font-size: 18px;
font-weight: 300;
line-height: 26px;
text-align: left;
max-width: 60%;
margin: 0 0 25px 0;
padding: 0;
}
h3 {
font-family: objektiv-mk1, sans-serif;
font-size: 12px;
line-height: 22px;
font-weight: 500;
margin: 0;
padding: 0;
}
a {
color: #e5e5e5;
text-decoration: none;
font-family: objektiv-mk1, sans-serif;
font-weight: 500;
}
a.body-link {
color: #e5e5e5;
text-decoration: none;
font-family: objektiv-mk1, sans-serif;
font-weight: 200;
}
a#header-link {
white-space: nowrap;
}
div.cell {
position: relative;
}
div.cell#text {
font-weight: 200;
font-size: 12px;
line-height: 18px;
}
div.cell {
position: relative;
}
div.cell#footer {
position: relative;
}
div.footer {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 0px 50px;
}
div.mark {
font-weight: 200;
font-size: 12px;
line-height: 18px;
align-items: end;
grid-column: span 2;
grid-row: span 1;
}
div#social {
position: relative;
bottom: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
white-space: nowrap;
}
<div class="nav">
<a class="navlogo" href="www.relicstudio.co">
<div class="icon-logo"></div>
</a>
</div>
<div class="cell">
<h1>
An independent design studio.
<br><br> We use the past to inform the present, leveraging creative and strategic solutions to projects of all types and sizes.
</h1>
<h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus sollicitudin velit, sed porta lectus accumsan nec. Sed nec diam quis neque pretium tristique. Request Advance Work Samples
</h2>
</div>
<div class="cell" id="footer">
<div class="footer">
<div class="cell" id="text">
<h3 id="heading">
Capabilities
</h3>
<br>
<ul>
<li>Naming</li>
<li>Editorial</li>
<li>Packaging</li>
<li>Tone & Voice</li>
<li>Art Direction</li>
<li>Brand Strategy</li>
<li>Identity System</li>
<li>Interface Design</li>
<li>Experience Design</li>
<li>Environmental Design</li>
</ul>
</div>
<div class="cell" id="text">
<h3 id="heading">
New Business
</h3><br>
telegram#relicstudio.co
<div id="social">
<h3 id="heading">
Follow For The Latest
</h3><br>
<ul>
<li>twitter</li>
<li>instagram</li>
</ul>
</div>
</div>
</div>
</div>