Абсолютное и относительное позиционирование в то же время в CSS

Question

В принципе у меня есть 3 дивы:

<div></div> 
<div></div> 
<div></div> 

щелкать на 1 DIV переключает видимость 2 DIV

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

У меня есть решение JS. Таким образом, любой чистый CSS был бы высоко оценен.

Answer 1

Вот один из подходов, который предполагает использование комбинации табличных ячеек CSS и абсолютного позиционирования.

Создание таблицы CSS в качестве верхнего уровня контейнера .main, и определить три display: table-row контейнеры .head, .extra и .content.

В пределах .content, гнездо a display: table-cell элемент .wrap и набор position: relative. В пределах .wrap используйте абсолютное позиционирование для размещения контейнера .scroller, который будет содержать содержимое.

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

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.main { 
 
    border: 1px dotted gray; 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    display: table; 
 
    overflow: hidden; 
 
} 
 
.head { 
 
    display: table-row; 
 
    height: 50px; 
 
    background-color: beige; 
 
    
 
} 
 
.extra { 
 
    display: table-row; 
 
    /* display: none; */ 
 
    height: 100px; 
 
    background-color: tan; 
 
} 
 
.content { 
 
    display: table-row; 
 
    background-color: lightblue; 
 
    height: auto; 
 
} 
 
.content .wrap { 
 
    display: table-cell; 
 
    height: auto; 
 
    position: relative; 
 
} 
 
.scroller { 
 
    overflow: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    
 
}

<div class="main"> 
 
    <div class="head">head</div> 
 
    <div class="extra">extra</div> 
 
    <div class="content"><div class="wrap"><div class="scroller"> 
 
     <p>Scrolling div...</p> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum imperdiet metus ac elementum. Donec viverra porttitor velit, ut eleifend nulla porttitor quis. Donec placerat, leo ac volutpat pellentesque, elit mauris aliquet metus, sit amet dictum enim augue consequat elit. Pellentesque eu diam a sem ornare tristique. Sed sollicitudin elementum nibh, eget tincidunt sem rhoncus at. Morbi cursus ornare dolor, vel tempus leo blandit ut. Donec at dictum eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer faucibus tellus in aliquet accumsan. Nam scelerisque ante eros, et tempus dolor mollis nec. Cras in mauris ac orci hendrerit venenatis. Nunc porta nisi eu odio feugiat, sed fermentum odio posuere. Vivamus luctus dui sit amet lobortis dignissim. Nulla feugiat est lacinia est porta porttitor. </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Если вы знаете, что будет только три div, вы можете просто управлять высотой и изменять ее с 33% до 66%, когда второй div рушится, а с помощью перехода css сделать анимацию.