CSS vertical positioning: relative top + absolute bottom - css

Question

I need to define a div that is preceded by any number of elements with arbitrary height, but it should fill the remaining space until the bottom of the fold.
The way I thought about doing this is to position the top with relative and the bottom with absolute, but I'm not sure if that's even possible in CSS.
#header {
border: 1px solid green;
width: 100%;
height: 100px;
}
#fill-the-fold {
border: 1px solid red;
position: absolute;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div id="header"></div>
<div id="fill-the-fold"></div>
Basically, I want the red container to start below the green and fill the space to the bottom of the page.
Any help on how to accomplish that, or if there's any easier way to go about it, much appreciated.

Answer 1

This is answered here.
In short - use flexbox if you can. Key items:
you'll need a flexbox wrapper around your 2 divs, with flex-direction: column
add flex-grow: 1 to #fill-the-fold.
Another possibility I couldn't see mentioned in the link above is to oversize the second div and chop off the bottom with a wrapper - fiddle. This is obviously only good when you don't mind losing the bottom of your second div.

Answer 2

You can reach your purpose by applying margin trick.
JSFiddle
HTML:
<div id="header"></div>
<div id="fill-the-fold">
<div id="content">
</div>
</div>
CSS:
html,body{ margin:0px; height:100%;}
div{
box-sizing: border-box;
}
#header {
border: 1px solid green;
width: 100%;
height: 100px;
}
#fill-the-fold {
margin-top: -100px; /* shifting it covers head */
padding-top: 100px; /* shifting the content under the head */
height: 100%;
}
#content{
border: 1px solid red;
height: 100%;
}
Append your red-border part after the head, and shifting it by negative margin. Then write your real content in the inner one.