How to make an element fill the remaining viewport height?

Question

I'd like to use CSS Grid. Something like this I think…

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto [whatever's left of the vh] auto auto;
  position: relative;
}

If that's the only case then better do it with the Flexbox. – VXp Apr 26 '18 at 13:11 — VXp, Apr 26 '18 at 13:11

score 17 · Answer 1 · edited Jan 23 '23 at 10:06

17

Set the viewport with display: flex and height: 100vh and add to the last element flex-grow: 1

.viewportDiv {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.div1{
  background-color: yellow;
  height: 100px;
}
.remainingDiv{
  background-color: red;
  flex-grow: 1;
}

<div class="viewportDiv">
  <div class="div1"></div>
  <div class="remainingDiv"></div>
</div>

edited Jan 23 '23 at 10:06

Mushroomator

6,516
1
10
27

answered Apr 26 '18 at 13:11

oma

1,804
12
13

Perfect solution! – Ed I Feb 13 '19 at 01:20

score 3 · Answer 2 · edited Apr 26 '18 at 17:22

Using CSS Grid you need to wrap the top two elements and the remaining space and then apply display: grid to that.

In other words, your diagram actually was the solution.

The wrapper should have a height of 100vh…

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: pink;
  display: grid;
  grid-template-rows: 100vh auto auto;
  position: relative;
}

.wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

header {
  background: green;
  padding: .25em;
}

nav {
  background: orangered;
  padding: .25em;
}

main {
  background: rebeccapurple;
}

footer {
  background: yellow;
}

.subfooter {
  background: blue;
}

<div class="wrapper">
  <header>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione magnam placeat quia iusto, quisquam cum temporibus modi, ex dolorem velit fuga! Minima, ex.
  </header>

  <nav>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  </nav>
  <main></main>
</div>
<footer>Lorem, ipsum.</footer>
<div class="subfooter">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex dignissimos ratione maxime officia eum. ea!
</div>

That was it. I didn't think of wrapping the first three elements! Thank you. — Ben Dunkle, Apr 26 '18 at 14:41

score 2 · Answer 3 · answered Apr 26 '18 at 13:24

You can do it using flex.

.a {
  width: 100%;
  height: auto;
}

.remaining {
  width: 100%;
  flex-grow: 1;
}

.holder {
  display: flex;
  flex-direction: column;
  height: 100%;
}

html,
body {
  height: 100%;
}

HTML code:

<div class="holder">
  <div class="a">
   Content here
  </div>
  <div class="a">
    Content here
  </div>
  <div class="remaining">
    Content here
  </div>
</div>

How to make an element fill the remaining viewport height?

3 Answers3