在 100vh 中容纳溢出的内容（CSS Grid）答案

【问题标题】：Accommodate overflown content in 100vh (CSS Grid)在 100vh 中容纳溢出的内容（CSS Grid）
【发布时间】：2019-08-18 06:41:58
【问题描述】：

我正在开发一个网站，但遇到了 CSS 问题。它正在使用网格显示，当前内容已溢出，必须滚动到底部。我想与视口处于相同的高度而无需滚动。我怎么做？ CSS 和组件文件如下。我尝试使用 grid-template-area 查看组件是否适合区域名称，但无济于事。感谢您的宝贵时间。

这是它当前的外观，我希望所有这些都可以容纳在视口中，而不必滚动。 https://media.giphy.com/media/U8GRKLQgnUo1J5L9ox/giphy.gif

//App.js

     render(){

    return (
      <div className="App">
        <Navbar className="nav"></Navbar>
        <MainContent className="content" analysisOnEnd={streamDataStep} analysisData={this.state.data}></MainContent>
      </div>
    );
  }

//App.css

        *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body, #root, .App{
      height: 100%
    }

    .nav{
      grid-area: 'nav';
    }

    .content{
      grid-area: 'content';
    }

    .App {
      background: #1D2730;
      /* overflow: hidden; */
      display: grid;
      height: 100vh;
      grid-template-rows: 74px 1fr;
      grid-gap: 62px;
      grid-template-areas: 'nav'
                            'content';
    }

【问题讨论】：

标签： css gridview sass css-grid

【解决方案1】：

首先：很难通过 gif 预览（而不是 HTML）来解决这个问题。

溢出

overflow的默认值为visible https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

如果将 col 高度设置为 1fr（与 100vh 相关）并放入长文章中，则会溢出。

网格和 100vh

从这里开始：

网格区域

https://www.joomlashack.com/blog/tutorials/how-to-place-items-with-grid-template-areas/

一般 - 这个基本示例运行良好：

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 2fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "nav nav nav"
    "main main sidebar"
    "footer footer footer";
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

sidebar {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

.item {
  border-radius: 10px;
  border: 2px solid #949494;
  text-align: center;
  padding: 20px;
}

<div class="container">
  <nav class="item"><span>Logo</span></nav>
  <main class="item"><h1>Main</h1><p>Main article</p></main>
  <aside class="item"><h2>aside</h2><ul style="display:inline-block;"><li>link 1</li><li>link 2</li></ul></aside>
  <footer class="item"><h2>Footer</h2></footer>
</div>

【讨论】：