2

我正在尝试将一个 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/

你有什么主意吗？谢谢

4

2 回答 2

1

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

于 2014-12-29T18:23:02.477 回答
1

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

.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 的填充也可以。

于 2014-12-29T18:47:44.600 回答