Question

我正在网站上，遇到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';
    }

Answer 1

首先：很难通过gif预览（而非HTML）解决此问题。

溢出

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

如果将col height设置为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>

以100vh容纳溢出内容（CSS网格）

1 个答案:

溢出

电网和100vh

网格区域