仅使用 css，将 div 定位在另一个使用 vh 单位的 div 中答案

【问题标题】：Using css only, position div within another div that uses vh unit仅使用 css，将 div 定位在另一个使用 vh 单位的 div 中
【发布时间】：2014-12-29 18:10:05
【问题描述】：

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

基本上，我需要做的是拥有child height = parent height - 50px。父级 max-height 应该是屏幕高度的 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/

你有什么想法吗？谢谢

【问题讨论】：

标签： html css viewport-units

【解决方案1】：

由于您使用的是视口单位（css3 功能），因此您可以使用calc 进行计算。

【讨论】：

【解决方案2】：

使用 calc 是解决方案，但您为包装器指定了 80vh 的最大高度。由于子元素会更小，父元素将调整为该大小（我希望我理解你的意思，如果你不希望父元素大于子元素，使子元素小 50px没有意义）。因此，您需要将其从最大高度更改为高度。 Link

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

.body {
    background: pink;
    position: relative;
    overflow-y: auto;
    height: calc(80vh - 50px);
    height: -webkit-calc(80vh - 50px);
    height: -moz-calc(80vh - 50px);
    height: -o-calc(80vh - 50px);
    height: -ms-calc(80vh - 50px);
}

.wrapper 的填充也可以。

【讨论】：