CSS Grid - Grid template not expanding full height

0
votes

I am using CSS-Grid and I'm adding some example content inside the main section, I dont't know why the content inside either the the main o sidebar sections are not expanding full height. As you can see in the code snippet. I have defined the body, html and container with heigth: 100vh or using 100%.

Am I missing something? Any advice would be appreciated.

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

html,
body {
    height: 100vh;
}

.container {
    height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    height: 100vh;
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    height: 100vh;
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  }
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav>navigation bar</nav>
        <div class="sidebar">sidebar</div>
        <main>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
        </main>
    </div>
</body>
</html>
3
csscss-grid
overflow: auto; to main? - Temani Afif

3 Answers

1
votes

If you just want fully responsive columns, your code could be simplified this way:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.container * {
  padding: 10px;
}

nav {
  height: 5rem;
  grid-column-start: 1;
  grid-column-end: 4;
  background: green;
}

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  background: gold;
}

main {
  grid-column-start: 2;
  grid-column-end: 4;
  background: skyblue;
}
<div class="container">
  <nav>navigation bar</nav>
  <div class="sidebar">sidebar</div>
  <main>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
  </main>
</div>
1
votes

You can also turn height:100vh to min-height:100vh to .container and remove height from .sidebar and main and eventually from html and body too , since .container will fill the screen itself

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

   

.container {
    min-height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav>navigation bar</nav>
        <div class="sidebar">sidebar</div>
        <main>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
        </main>
    </div>
</body>
</html>
0
votes

You need to edit two classes.

Main & Sidebar with height: 100%

And also dont forget to clear the cache.

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

html,
body {
    height: 100vh;
}

.container {
    height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    height: 100%;
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    height: 100%;
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav>navigation bar</nav>
        <div class="sidebar">sidebar</div>
        <main>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
        </main>
    </div>
</body>
</html>

Hope this will be useful.