Высота макета CSS Grid и полоса прокрутки работают неправильно - PullRequest
Новая
       8

Высота макета CSS Grid и полоса прокрутки работают неправильно

0 голосов
/ 15 октября 2018

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 голосов
/ 15 октября 2018

Если вы уменьшите разрыв сетки, это должно исправить вашу проблему.Используя 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>
...