Question

Is there a way to achieve this with CSS?
element height = 100% minus previous element height

Please don’t provide JavaScript answers, because I already have:

CSS:

.mydiv{
    height:100%;
}

JavaScript (jQuery):

$('.mydiv').each(function(){
    $(this).css('height', $(this).height() - $(this).prev().height());
});

Actually, I want to reproduce the second effect of this demo using only CSS.
Thanks

Edit:
What I exactly want to achieve: I want two elements to fit vertically in their parent, without specifying the first element height

Answer 1

Using display:table and display:table-row to achieve this with CSS

There is the demo