How To cover remaining space between two division vertically

Question

Here is the CSS I have applied CSS to wrapper, header and footer, and I tried to cover the remaining part of the screen with the between container but I am not able to do it.

.wrapper {
  height: 100vh;
}

.header {
  width: 100vw;
  display: flex;
  position: absolute;
  top: 0;
}

.between {}

.footer {
  position: absolute;
  bottom: 0;
  width: 100vw;
}

<div class="wrapper">
  <div class="header"></div>
  <div class="between"></div>
  <div class="footer"></div>
</div>

score 0 · Accepted Answer · answered Dec 02 '22 at 18:17

you can use display: flex for this, use flex:1 to the child you want to take up available space.

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: red;
  height: 10px;
}

.between {
  background: green;
  flex: 1;
}

.footer {
  background: yellow;
  height: 10px;
}

<div class="wrapper">
  <div class="header"></div>
  <div class="between"></div>
  <div class="footer"></div>
</div>

How To cover remaining space between two division vertically

1 Answers1