How can an html element fill out 100% of the remaining screen height, using css only?

Question

I have a header element and a content element:

#header
#content

I want the header to be of fixed height and the content to fill up all the

Answer 1

For me, the next worked well:

I wrapped the header and the content on a div

I used this reference to fill the height with flexbox. The CSS goes like this:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

For more info about the flexbox technique, visit the reference