CSS网格布局高度和滚动条无法正常工作

时间：2018-10-15 12:44:00

标签： html css css-grid

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>

我有两个问题，我尝试使用网格进行简单的布局，单元格可以正常工作： 为什么在底部显示一个滚动条？

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

1 个答案:

答案 0 :(得分：1)

如果减小网格间隙，它应该可以解决您的问题。通过使用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>

相关问题
最新问题