html - 仅使用 css，将 div 定位在另一个使用 vh 单元的 div 中

Question

我试图将一个 div 定位在另一个 div 中，其中父级的高度是使用 vh 单位定义的。

基本上，我需要做的是让child height = parent height - 50px。父级最大高度应为屏幕高度的 80%。子高度应该有一个滚动条来显示长内容。

我尝试了几种不同的方法，但似乎没有任何效果。

这是我尝试过的:

.wrapper {
    background: yellow;
    max-height: 80vh;
    width: 300px;
}

.body {
    background: pink;
    position: absolute;
    bottom: 50px;
    overflow-y: auto;
    top: 0;
}

http://jsfiddle.net/qLhhk46n/

你有什么想法吗？谢谢

Answer 1

由于您使用的是视口(viewport)单位(css3 功能)，您可以使用 calc做数学。