Использование только css, позиция div внутри другого div, использующего vh unit

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/

Есть ли у вас какие-либо идеи? Thanks

Answer 1

Поскольку вы используете единицы просмотра (функция css3), вы можете использовать calc для выполнения математики.

Answer 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 бы это сделать, тоже.