Using css only, position div within another div that uses vh unit

Question

I'm trying to position a div within another div where the height of the parent is defined using vh unit.

Basically, what I need to do is to have the child height = parent height - 50px. The parent max-height should be 80% of the height of the screen. The child height should have a scrollbar to display long content.

I tried a couple of different things but nothing seems to work.

This is what I tried:

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

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

http://jsfiddle.net/qLhhk46n/

Do you have any idea? Thanks

Answer 1

Since you're using viewport units (css3 feature), you can use calc to do the math.

Answer 2

Using calc is the solution, but you gave the wrapper the max-height of 80vh. As the child element will be smaller, the parent element will be adjusting to that size (I hope I’m understanding you right, if you didn’t want the parent element to be bigger than the child element, making the child element 50px smaller wouldn’t make sense). So you need to change it from max-height to height. 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);
}

A padding for .wrapper would do it, too.