CODEWITHSUNDEEP
csscss-grid
Andres2142
Andres2142

Reputation: 2907

CSS Grid - Grid template not expanding full height

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

* {
    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>

Upvotes: 1

Views: 73

Answers (3)

AbsoluteBeginner
AbsoluteBeginner

Reputation: 2255

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>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106048

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>

Upvotes: 1

Rajen Trivedi
Rajen Trivedi

Reputation: 1302

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.

Upvotes: 0

Related Questions