How to take up the remaining space from the viewport height?

Question

I have this full width div that takes up around 30% of my view port height (not sure of the exact height) and I was wondering if there is a property that will allow me to take up the remaining height of the view port in another div so that both divs take up 100 percent of my view port height?

Why not just set the viewport height on the one div to 100 instead of adding a seperate div? Unless you mean you have two divs? — cela, Sep 09 '20 at 01:54
You can achieve it in single div with height 100% or 100vh css properties. — Saran, Sep 09 '20 at 01:58
You can use `calc` function and place second div relatively to first. `height: calc(100%-30vh)` — Adrian Solarczyk, Sep 09 '20 at 02:11
It would be `height: calc(100% - 30vh)` with spaces around the `-` otherwise I think it won't render it. — avia, Sep 09 '20 at 02:43

score 1 · Answer 1 · answered Sep 09 '20 at 02:07

It is very simple using viewport units. They represent a percentage of current browser's viewport.

In your case, 30vh will be 30% of viewport height, not the div's container, on the first div.

.content-1 {
  height: 30vh;
  background-color: lightblue;
}

.content-2 {
  height: 70vh;
  background-color: red;
}


/* useless wrapper, since children are using vh */
.wrapper {
  height:50%; /* does not effect children's height */
}

<div class="wrapper">
  <div class="content-1">lorem</div>
  <div class="content-2">ipsum</div>
</div>

score 0 · Answer 2 · answered Sep 09 '20 at 03:49

dynamic height solution is flex box:

.parent {
    height: 300px;
    border: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
}
.parent div {
    width: 100%;
}
.one {background: #ddd}
.two {background: #ccc}
.three {background: #aaa;}

<div class="parent">
   
    <div class="one">text</div>
    <div class="two">text<br>text</div>
    <div class="three">text<br>text<br>text<br>text<br>text<br>text</div>
    
</div>

anatolhiman · Answer 3 · 2020-09-09T04:35:18.387

The "Sticky footer, five ways" article from CSS-Tricks has a few good techniques for this which will help you achieve what you're after, while adding a modern UI experience to the mix.

Note that this article isn't exclusively useful for creating footers, the techniques are what you need in order to create a web interface that has the flexibility to automatically fill up short pages (pages with little content) without adding fillers (spacers, etc.) and at the same dynamically allowing long content lengths. Recommended: https://css-tricks.com/couple-takes-sticky-footer/

I prefer, and use regularly, the simple and perfect flexbox method to solve this problem.

How to take up the remaining space from the viewport height?

3 Answers3