Make a div in a grid stretch to full height

Issue

I have a very simple grid layout of the menu, header, and content.

I would like the content (blue box) to stretch vertically. As you can see, the grid element (yellow box) already stretches vertically, but the blue element inside of it (which should be dynamic content) does not.

Is there a way to achieve this 1) without switching the whole grid structure to flexbox and 2) without using calc to give the blue content 100vh minus the header height?

.container {
  height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "menu header" "menu content";
  box-sizing: border-box;
  overflow: hidden;
}

.mainMenuWrapper {
  grid-area: menu;
  height: auto;
}

.headerWrapper {
  grid-area: header;
  height: auto;
}

.contentWrapper {
  grid-area: content;
  overflow-y: auto;
  height: auto;
  background-color: yellow;
}

.menu {
  height: 100vh;
  background-color: red;
  width: 50px;
}

.header {
  height: 80px;
  background-color: green;
}

.content {
  background-color: blue;
  width: 100%;
  height: ???
}
<div class="container">
  <div class="mainMenuWrapper">
    <div class="menu">
      menu
    </div>
  </div>
  <div class="headerWrapper">
    <div class="header">
      header
    </div>
  </div>
  <div class="contentWrapper">
    <div class="content">
      content
    </div>
  </div>
</div>

Image:
enter image description here

JSFiddle link: https://jsfiddle.net/the2sj1n/3/

Solution

You can apply height: 100% on that blue box .content

body {
  margin: 0; /*Removed unexpected margins from browsers' default styles*/
}

.container {
  height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "menu header" "menu content";
  box-sizing: border-box;
  overflow: hidden;
}

.mainMenuWrapper {
  grid-area: menu;
  height: auto;
}

.headerWrapper {
  grid-area: header;
  height: auto;
}

.contentWrapper {
  grid-area: content;
  overflow-y: auto;
  height: auto;
  background-color: yellow;
}

.menu {
  height: 100vh;
  background-color: red;
  width: 50px;
}

.header {
  height: 80px;
  background-color: green;
}

.content {
  background-color: blue;
  width: 100%;
  height: 100%; /*The change here*/
}
<div class="container">
  <div class="mainMenuWrapper">
    <div class="menu">
      menu
    </div>
  </div>
  <div class="headerWrapper">
    <div class="header">
      header
    </div>
  </div>
  <div class="contentWrapper">
    <div class="content">
      content
    </div>
  </div>
</div>

Answered By – Nick Vu

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published