分数CSS网格扩展到视口下方

Question

我只是想不通为什么我设置的网格延伸到视口下方。

除了徽标单元，垂直网格中的另外两个单元是分数的。基本上，与视口大小无关，页脚部分延伸到视口底部下方。我希望页面可以自行调整大小，因此您无需在桌面上滚动。

@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. <a href="mailto:[email protected]" id="header-link">Request Advance Work Samples</a>
      </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 &amp; 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>
          <a href="mailto:[email protected]" class="body-link">[email protected]</a>
          <div id="social">
            <h3 id="heading">
              Follow For The Latest
            </h3><br>
            <ul>
              <li><a href="twitter.com/relicstudioco" target="_blank" class="body-link">twitter</a></li>
              <li><a href="instagram.com/relicstudioco" target="_blank" class="body-link">instagram</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

Answer 1

重新设计/简化了HTML / CSS以修复高度问题。演示：

@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. <a href="mailto:[email protected]" id="header-link">Request Advance Work Samples</a>
  </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 &amp; 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>
      <a href="mailto:[email protected]" class="body-link">[email protected]</a>
      <div id="social">
        <h3 id="heading">
          Follow For The Latest
        </h3><br>
        <ul>
          <li><a href="twitter.com/relicstudioco" target="_blank" class="body-link">twitter</a></li>
          <li><a href="instagram.com/relicstudioco" target="_blank" class="body-link">instagram</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>