html - CSS 上一个元素

Question

有没有办法用 CSS 来实现这一点？
元素高度 = 100% 减去前一个元素高度

请不要提供 JavaScript 答案，因为我已经有:

CSS:

.mydiv{
    height:100%;
}

JavaScript(jQuery):

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

其实我想重现this demo的第二个效果仅使用 CSS。
谢谢

编辑:
我真正想要实现的目标是:我希望两个元素垂直放置在它们的父元素中，不指定第一个元素的高度

Answer 1

使用 display:table 和 display:table-row 通过 CSS 实现这一点

There is the demo