问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

CSS Grid - 底部的空白以及如何删除它

社区维基
1
新手上路，请多包涵

我正在尝试掌握 CSS Grid，这是我以前使用的 Bootstrap 的一个过渡。

我创建了一个简单的布局（4 行和 6 列），但是底部有一个不需要的空白，导致可见滚动。

有没有办法在不为 .container 元素设置确切高度的情况下解决这个问题？当我将高度设置为 .container（高度：500 像素）时，问题就消失了。这是绕过它的方法吗？我不想使用可能会导致我在较小或较大视口上出现问题的快速修复。

 .grid{
  display: grid;
  position: relative;
  margin: auto;
  grid-template-areas:
    "nav nav nav nav nav nav"
    "logo logo logo logo logo logo"
    "main main main main main side"
    "footer footer footer footer footer footer";

  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 50px 1fr 1fr;
}
.nav{
  grid-area: nav;
  background-color:green;
}
.logo{
  grid-area: logo;
  background-color:salmon;
}
.main{
  grid-area: main;
  background-color:cadetblue;
  min-height: 800px;
  height: auto;
}
.side{
  grid-area: side;
  background-color:lightpink;
  min-height: 800px;
  height: auto;
}
.footer{
  grid-area: footer;
  background-color:sandybrown;
  height: 50px;
}

.overlap{
  background-color: hotpink;
  grid-area: 3/ 3/ 3/ 4;
  z-index: 5;
}

 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSSGrid</title>

    </head>

    <body>
      <div class="grid">

        <nav class="nav"></nav>
        <div class="logo"></div>
        <div class="overlap">
          <h3>Overlap!</h3>
        </div>
        <section class="main"></section>
        <aside class="side"></aside>
        <footer class="footer"></footer>

      </div>
    </body>
    </html>

原文由 ross-u 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssscrollbarcss-grid
阅读 856
2 个回答
得票最新
社区维基
1
✓ 已被采纳

由于您想要 4 行并且 其中 一行占用尽可能多的空间 ( 1fr )，因此最后一行应该具有固定高度或设置为 auto 。

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.grid {
  display: grid;
  position: relative;
  margin: auto;
  grid-template-areas: "nav nav nav nav nav nav" "logo logo logo logo logo logo" "main main main main main side" "footer footer footer footer footer footer";
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 50px 1fr auto;
}

.nav {
  grid-area: nav;
  background-color: green;
}

.logo {
  grid-area: logo;
  background-color: salmon;
}

.main {
  grid-area: main;
  background-color: cadetblue;
  min-height: 800px;
  height: auto;
}

.side {
  grid-area: side;
  background-color: lightpink;
  min-height: 800px;
  height: auto;
}

.footer {
  grid-area: footer;
  background-color: sandybrown;
  height: 50px;
}

.overlap {
  background-color: hotpink;
  grid-area: 3/ 3/ 3/ 4;
  z-index: 5;
}

 <div class="grid">
  <nav class="nav"></nav>
  <div class="logo"></div>
  <div class="overlap">
    <h3>Overlap!</h3>
  </div>
  <section class="main"></section>
  <aside class="side"></aside>
  <footer class="footer"></footer>
</div>

原文由 Paulie_D 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

将 grid-template-rows 更改为 50px 50px 1fr 。您也可以尝试 height: fit-content 。

原文由 onyx 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题