CSS-макет с прокруткой гибкой панели

Question

Я пытаюсь построить простой CSS-макет и иметь массу проблем:

Я хочу 3 вертикальных панели. Верхняя панель - 'banner' - крепится к верхней части внешнего контейнера. Его высота должна определяться его содержимым - I не хотят иметь определенную или процентную высоту. Если я увеличиваю размер шрифта или вставляю более крупное изображение, высота баннера должна соответственно измениться, и панели внизу также должны соответственно изменить высоту.

Средняя панель - «опция» - будет содержать некоторое содержимое, которое может также увеличиваться или уменьшаться (так же, без определенной или процента высоты), и время от времени я могу скрыть или удалить среднюю панель , Изменения в средней панели должны влиять на высоту нижней панели, но не на баннер.

Нижняя панель - 'flexible' - должна быть закреплена на дне контейнера и расти вверх. Если на его текущей высоте может отображаться больше контента, он должен отображать вертикальные полосы прокрутки. ТОЛЬКО эта панель должна отображать полосы прокрутки - я не хочу их на других панелях или на внешнем контейнере. Если «дополнительная» панель сжимается или скрывается, верхняя часть «гибкой» панели должна двигаться вверх, останавливаясь только в том случае, если больше нет внутреннего содержимого для отображения.

Вот мой эскиз. Когда отображается необязательный элемент, гибкий элемент должен получить вертикальную полосу прокрутки:

$(function() { 
 
    $('a').click(function() { 
 
    $('.optional').toggle(); 
 
    return false; 
 
    }); 
 
});

div, h1, p { margin: 0; padding: 5px; position: relative; } 
 
h1 a { 
 
    font: .5em sans-serif; 
 
} 
 

 
.container { 
 
    outline: 1px solid pink; 
 
    height: 420px; 
 
    overflow: hidden; 
 
} 
 
.banner { 
 
    outline: 1px solid blue; 
 
} 
 
.optional { 
 
    outline: 1px solid orange; 
 
} 
 
.flexible { 
 
    outline: 1px solid lime; 
 
    min-height: 25%; 
 
    overflow-y: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row banner"> 
 
    <h1>Hello world <a href="#">toggle optional</a></h1> 
 
    </div> 
 
    <div class="row optional"> 
 
    <p>Optional 1</p> 
 
    <p>Optional 2</p> 
 
    <p>Optional 3</p> 
 
    <p>Optional 4</p> 
 
    <p>Optional 5</p> 
 
    </div> 
 
    <div class="row flexible"> 
 
    <p>flex01</p> 
 
    <p>flex02</p> 
 
    <p>flex03</p> 
 
    <p>flex04</p> 
 
    <p>flex05</p> 
 
    <p>flex06</p> 
 
    <p>flex07</p> 
 
    <p>flex08</p> 
 
    <p>flex09</p> 
 
    <p>flex10</p> 
 
    </div> 
 
</div>

У меня очень трудно получить эту работу, используя только CSS. Я использую относительное и абсолютное позиционирование в разных комбо, но они хотят знать высоты элементов, а высоты - динамические. Я немного играл с flexbox, но не мог получить вертикальное расширение для работы.

Я мог бы использовать все виды JavaScript - при загрузке документа или изменении размера окна, получить высоту внешнего контейнера, получить вычисленную высоту баннера и дополнительных панелей и установить высоту гибкой панели на контейнерHeight - (bannerHeight + optionalHeight). Но я хотел бы избежать JS, если это возможно. Только современные браузеры - IE10 +, Chrome/Safari/FF current, iOS, Android.

Возможно?

Answer 1

Если вы в порядке, используя свойства flex, вы можете достичь этого (только для молодых браузеров). Для более старого браузера вам все еще нужен javascript для того, чтобы установить вживую обе высоты до .optionnal & .flexible, если вы не позволите .container расти.

$(function() { 
 
    $('a').click(function() { 
 
    $('.optional').toggle(); 
 
    return false; 
 
    }); 
 
});

div, 
 
h1, 
 
p { 
 
    margin: 0; 
 
    padding: 5px; 
 
    position: relative; 
 
} 
 
h1 a { 
 
    font: .5em sans-serif; 
 
} 
 
.container { 
 
    outline: 1px solid pink; 
 
    height: 420px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.banner { 
 
    outline: 1px solid blue; 
 
} 
 
.optional { 
 
    outline: 1px solid orange; 
 
    flex: 1; 
 
} 
 
.flexible { 
 
    outline: 1px solid lime; 
 
    overflow-y: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row banner"> 
 
    <h1>Hello world <a href="#">toggle optional</a></h1> 
 
    </div> 
 
    <div class="row optional"> 
 
    <p>Optional 1</p> 
 
    <p>Optional 2</p> 
 
    <p>Optional 3</p> 
 
    <p>Optional 4</p> 
 
    <p>Optional 5</p> 
 
    </div> 
 
    <div class="row flexible"> 
 
    <p>flex01</p> 
 
    <p>flex02</p> 
 
    <p>flex03</p> 
 
    <p>flex04</p> 
 
    <p>flex05</p> 
 
    <p>flex06</p> 
 
    <p>flex07</p> 
 
    <p>flex08</p> 
 
    <p>flex09</p> 
 
    <p>flex10</p> 
 
    </div> 
 
</div>

---

codepen to play with (тест с большим содержанием в optionnal)