个人中心
gpt4 book ai didi

html - CSS Grid 布局高度和滚动条不能正常工作

转载 作者：可可西里 更新时间：2023-11-01 13:42:35 25 4
gpt4 key购买 nike

CSS

.site {
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-rows: 10% 10% 60% 20%;
  grid-gap: 10px;


  grid-template-areas:
  "header header"
  "nav bar"
  "nav content"
  "nav description";
}

.page-title{
  grid-area: header;
  background-color: yellow;
}

.navbar{
  grid-area: nav;
  background-color: grey;
}

.bar_content{
  grid-area: bar;
  background-color: orange;
}

.main{
  grid-area: content;
  background-color: red;
}

.explanation{
  grid-area: description;
  background-color: green;
}
<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Ressourcenplannung</title>
  </head>
  <body>
    <div class="site">

      <header class="page-title">
          <img src="Konami.png" width="20%">
      </header>

      <nav class="navbar">
        <ul>
              <li><a href="#">Mitarbeiter</a></li>
              <li><a href="#">Arbeiten / Projekte</a></li>
              <li><a href="#">Auslastungdiagnose Woche</a></li>
              <li><a href="#">Auslastungdiagnose Tag</a></li>
          </ul>
      </nav>

      <bar class="bar_content">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
           sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </bar>
      
      <content class="main">
        <table>
          <tr>
            <th>Vorname</th>
            <th>Nachname</th>
            <th>Geburtsdatum</th>
            <th>Pensum in %</th>
            <th>Anstellungsverhälnis</th>
            <th>Vertragsende</th>
          </tr>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>26.07.1985</td>
            <td>100%</td>
            <td>Vollzeit</td>
            <td></td>
          </tr>
          <tr>
            <td>Aaron</td>
            <td>Solo</td>
            <td>26.07.1996</td>
            <td>100%</td>
            <td>Lehrling</td>
            <td>31.08.2019</td>
          </tr>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>26.07.1985</td>
            <td>100%</td>
            <td>Vollzeit</td>
            <td></td>
          </tr>
          <tr>
            <td>Aaron</td>
            <td>Solo</td>
            <td>26.07.1996</td>
            <td>100%</td>
            <td>Lehrling</td>
            <td>31.08.2019</td>
          </tr>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>26.07.1985</td>
            <td>100%</td>
            <td>Vollzeit</td>
            <td></td>
          </tr>
          <tr>
            <td>Aaron</td>
            <td>Solo</td>
            <td>26.07.1996</td>
            <td>100%</td>
            <td>Lehrling</td>
            <td>31.08.2019</td>
          </tr>
        </table>
      </content>
      
      <description class="explanation">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
         sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </description>
      
    </div>
  </body>
</html>

我有两个问题，我试图用网格制作一个简单的布局，单元格工作正常:为什么底部显示一个滚动条？

当我定义了列和行的大小时，为什么网格不使用窗口的完整大小。

最佳答案

如果您降低网格间隙，应该可以解决您的问题。通过使用 20% 和 80%，您实际上并没有在页面上为页边距(或网格间隙)留出任何空间。它有时可以将边距或填充移出屏幕，这将使滚动条出现。

.site {
  position: absolute;
  height: 98%;
  margin-right: 10px;

  display: grid;
  grid-template-columns: auto 80%;
  grid-template-rows: 10% 10% auto 20%;
  grid-gap: 10px;


  grid-template-areas:
  "header header"
  "nav bar"
  "nav content"
  "nav description";
}

.page-title{
  grid-area: header;
  background-color: yellow;
}

.navbar{
  grid-area: nav;
  background-color: grey;
}

.bar_content{
  grid-area: bar;
  background-color: orange;
}

.main{
  grid-area: content;
  background-color: red;
}

.explanation{
  grid-area: description;
  background-color: green;
}
<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Ressourcenplannung</title>
  </head>
  <body>
    <div class="site">

      <header class="page-title">
          <img src="Konami.png" width="20%">
      </header>

      <nav class="navbar">
        <ul>
              <li><a href="#">Mitarbeiter</a></li>
              <li><a href="#">Arbeiten / Projekte</a></li>
              <li><a href="#">Auslastungdiagnose Woche</a></li>
              <li><a href="#">Auslastungdiagnose Tag</a></li>
          </ul>
      </nav>

      <bar class="bar_content">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
           sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </bar>
      
      <content class="main">
        <table>
          <tr>
            <th>Vorname</th>
            <th>Nachname</th>
            <th>Geburtsdatum</th>
            <th>Pensum in %</th>
            <th>Anstellungsverhälnis</th>
            <th>Vertragsende</th>
          </tr>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>26.07.1985</td>
            <td>100%</td>
            <td>Vollzeit</td>
            <td></td>
          </tr>
          <tr>
            <td>Aaron</td>
            <td>Solo</td>
            <td>26.07.1996</td>
            <td>100%</td>
            <td>Lehrling</td>
            <td>31.08.2019</td>
          </tr>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>26.07.1985</td>
            <td>100%</td>
            <td>Vollzeit</td>
            <td></td>
          </tr>
          <tr>
            <td>Aaron</td>
            <td>Solo</td>
            <td>26.07.1996</td>
            <td>100%</td>
            <td>Lehrling</td>
            <td>31.08.2019</td>
          </tr>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>26.07.1985</td>
            <td>100%</td>
            <td>Vollzeit</td>
            <td></td>
          </tr>
          <tr>
            <td>Aaron</td>
            <td>Solo</td>
            <td>26.07.1996</td>
            <td>100%</td>
            <td>Lehrling</td>
            <td>31.08.2019</td>
          </tr>
        </table>
      </content>
      
      <description class="explanation">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
         sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </description>
      
    </div>
  </body>
</html>

关于html - CSS Grid 布局高度和滚动条不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52817086/

25 4 0
文章推荐： windows - 在 stdin 在 Windows 上阻塞时退出应用程序
文章推荐： php - 获取子文件夹的数量
文章推荐： php - 不能对属性或 getter 施加约束
文章推荐： javascript - 可以指向以 javascript ://execute any code? 开头的 URL 的链接吗
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com