CSS calc с переменной высотой

Question

У меня есть два divs, уложенных друг на друга. Верхний div содержит меню аккордеона и имеет высоту 300px, когда он полностью расширен. CSS для нижней DIV является:

высота: известково (100vh - 300px)

Это прекрасно работает, когда гармошка в верхней DIV полностью расширен - нижний ДИВ заполняет остальную часть вертикали пространство видового экрана.

Проблема возникает, когда аккордеон в верхнем div обрушивается. Теперь верхний div только 50px высок, но CSS для нижнего div все еще вычитает 300px от 100vh.

Возможно ли вычесть значение из 100vh в переменную вместо фиксированного значения? Таким образом, вместо количества жестко закодированных пикселей, он вычитает любую высоту верхнего div.

Answer 1

Вы можете использовать селектор sibling для жесткого кодирования нового значения, если ваша разметка структурирована определенным образом.

В коде ниже селектора родственного для расширенного аккордеона используется для целевых и переопределить значение по умолчанию вычисленного высоту DIV ниже его с новой

Я пытался объяснить это с помощью этой скрипки: https://jsfiddle.net/L4ae0rq6/

HTML

<div class="accordion collapsed"></div> 
<div class="calc"></div> 
<hr/> 
<div class="accordion expanded"></div> 
<div class="calc"></div> 

CSS

.accordion.collapsed { 
    height: 50px; 
    width: 200px; 
    background: grey; 
} 

.accordion.expanded { 
    height: 100px; 
    width: 200px; 
    background: grey; 
} 

.accordion.expanded + .calc { 
    height: calc(100vh - 300px); 
} 

.calc { 
    width: 200px; 
    height: calc(100vh - 200px); 
    background: lightgrey; 
} 

Надеюсь, это поможет.

Answer 2

Вы можете использовать flex.

Проверьте следующее:

.container { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 
.expandable { 
    background: red; 
    min-height: 40px; 
} 
.expandable.expanded { 
    flex-basis: 300px; 
} 
.filler { 
    background: green; 
    flex-grow: 1; 
} 

Так что, когда добавляется .expanded класса он занимает пространство 300 пикселей в противном случае как минимум 40 пикселей.

В любом случае, .filler займет пробег, если вы используете flex-grow: 1.

Demo