Вычислить высоту Divs вокруг высоты Div, основанной на ширине родителя?

Question

У меня есть внешний DIV со следующим CSS (конденсируется, чтобы показать значение только) атрибуты:

.container{ 
position:relative; 
box-sizing:border-box; 
width:calc(100% - 80px); 
margin-left:40px; 
height:calc(100% - 80px); 
} 

Внутри у меня есть три дивов, верхняя, содержащие вводный текст, средние один холдинг контента, а нижнее один для комментариев посетителя. Средний будет фото слайд-шоу, видеоклип, карта и т.д. Так должно быть специфическим соотношением сторон, учитывая ширин жидкости я использую следующий образец (соотношение 2: 1) CSS:

.videoplayer{ 
position:absolute; 
box-sizing:border-box; 
width:calc(100% - 40px); 
left:20px; 
top:50%; 
height:0px; 
padding-top:calc(25% - 10px); 
padding-bottom:calc(25% - 10px); 
transform:translate(0,-50%); 
} 

Используя нулевую высоту и делая высоту от% вертикального заполнения, она создает ее динамически динамически на основе ширины родителя, а затем сверху: 50%; и transform: translate (0, -50%); расположите его по центру в родительском div.

Проблема у меня есть, я хочу, чтобы divs, которые идут выше и ниже этого, подходят для оставшегося пространства над и под ним, и я не знаю, как рассчитать их высоту!

Окончательный результат я ищу это: THIS

Кто-нибудь знает, если это возможно (в идеале с чистым CSS), и если да, то как?

Большое спасибо :)

Answer 1

В моем случае, я хочу, чтобы мой экран выглядит как то же самое во всех ПК настольного браузера, все мобильный браузер, все Android телефонов и всех iPhone'ов.

поэтому я устанавливаю внешнюю высоту div для отображения доступной высоты. У меня есть 3 внутренних div, верхний div height = высота экрана/14, нижняя высота div = высота экрана/14, средний div Высота = высота экрана * 12/14

Я никогда не использую что-то вроде 20px, так как каждый экран 20px отличается , Я использую (высота экрана/некоторое число) px вместо

Answer 2

Большое спасибо @ David-Thomas за то, что указали мне в сторону гибкой коробки, с которой мне удалось разобраться! Решение ниже, если у кого-то другая проблема.

.videocontainer{ /* PARENT DIV - FLUID HEIGHT TO FILL VIEWPORT */ 
position:relative; 
box-sizing:border-box; 
width:calc(100% - 80px); 
margin-left:40px; 
height:calc(100% - 80px); 
display:inline-flex; 
flex-direction:column; 
justify-content:center; 
align-content:stretch; 
align-items:stretch; 
} 

.videotext{ /* DIV HEIGHT FLUID TO FILL SPACE ABOVE */ 
flex:1; 
width:calc(100% - 40px); 
margin-left:20px; 
margin-top:20px; 
margin-bottom:20px; 
box-sizing:border-box; 
} 

.videoplayer{ /* DIV HEIGHT FIXED RATIO TO WIDTH */ 
box-sizing:border-box; 
width:calc(100% - 40px); 
margin-left:20px; 
height:0px; 
padding-top:calc(25% - 10px); 
padding-bottom:calc(25% - 10px); 
} 

.videocomments{ /* DIV HEIGHT FLUID TO FILL SPACE BELOW */ 
flex:1; 
width:calc(100% - 40px); 
margin-left:20px; 
margin-top:20px; 
margin-bottom:20px; 
box-sizing:border-box; 
}