Force div to occupy the rest of space with css-grid

Question

Is there a way to force the grid container to extend to the end of the screen with css-grid (see snippet below, where I use height: 80vh; for a manual approach for visualization's sake)

EDIT: I could always know the height of the header and footer, and then use for example grid-template-rows: calc(100vh - ...px);

body {
  margin: 0;
}

.header {
  height: 100px;
  background: #f6eeee;
  margin: 5px 0px;
  border: 1px solid #cacaca;
  padding: 5px;
}

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-column-gap: 10px;
  border: 2px solid #000;
  overflow: hidden;
  margin: 5px 0px;
  border: 1px solid #cacaca;
}

.left {
  display: grid;
  grid-template-rows: calc(100vh - 2*112px - 2*12px);
  /* 100px height + 10px padding + 2px border */
  /* 10px margin + 2px border */
  overflow: auto;
  /* height: 80vh; */
}

.left>div {
  height: 40000px;
  background: #e7e6de;
  padding: 5px;
}

.right {
  height: 300px;
  background: #e3e7e9;
  padding: 5px;
}


  whatever relevant
  
    
      lots of content
    
    another content
  
  whatever relevant 2

user_2723135 · Answer

The easiest/neatest solution is flexbox. You can use it for static header/footer height or dynamic as well, just change the header/footer height set in px/vh respectively.

No need to use calc functions, and it's probably the best way to create dynamic grid as well.

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.site-content {
  flex: 1;
}
header, footer {
  height: 20vh;
  background-color: orange;
  color: white;
}


  Navigation
  content goes here
  Footer stuff

Force div to occupy the rest of space with css-grid

1 Answers