Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

CSS Grid layout height and scrollbar don't work right

Tags:

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>

I had two question I tried to make a simple layout with grid the cells works fine just: Why there is displayed a scollbar in the bottom?

Why the grid don't use the full size of the window when I have defined the sizes of the columns and rows.

like image 516
Fabio Urso Avatar asked Feb 04 '26 14:02

Fabio Urso

1 Answers

If you lower the grid gap, it should fix your issue. By using 20% and 80%, you aren't really leaving any room for margins (or grid gaps) on the page. It can sometimes push a margin or padding off the screen, which will make a scroll bar appear.

.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>
like image 170
Chillie Avatar answered Feb 06 '26 05:02

Chillie
Sign in to Comment

Related questions

Prevent auto detection of phone numbers in Chrome mobile
How to toggle visibility when user makes a selection

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!