Использование CSS для создания панели с динамической высотой панели панели заполняет остальную часть высоты родительского контейнера

Question

У меня есть панель с заголовком, телом и нижним колонтитулом, и эта панель должна заполнить экран (или его родительский контейнер) даже если содержимое в корпусе панели переполняется или нет. если он переполняется, тогда тело будет прокручиваться. Высота заголовка и нижнего колонтитула динамична, так как они могут меняться с различными размерами порта просмотра, поэтому я не могу жестко задавать высоту панели или дополнение для учета верхнего/нижнего колонтитула.

Другими словами, все, что я хочу, состоит в том, чтобы панель с заголовком, телом и нижним колонтитулом заполнила экран так, чтобы не было полосы прокрутки страницы. Панель всегда должна иметь 100% высоты экрана/контейнера, даже если содержание тела имеет меньшую высоту. Если содержание тела панели имеет большую высоту, тогда тело панели должно прокручиваться, а не всю страницу.

Вот пример моей проблемы с jsfiddle. Если вы раскомментируете javascript, вы увидите, что я хочу. Я не хочу использовать javascript, хотя функции CSS3 в порядке.

Вот основная HTML структура:

<div class="container"> 
    <div class="panel"> 
     <div class="panel-heading"> 
      <h1>A heading with a dynamic height</h1> 
     </div> 
     <div class="panel-body"> 
      <!-- May be a lot or little content --> 
     </div> 
     <div class="panel-footer"> 
      <h1>A footer with a dynamic height</h1> 
     </div> 
    </div> 
</div> 

Answer 1

Вы можете сделать это с помощью CSS table + table-row + table-cell, с высотой 100% от тела панели, которая выталкивает панель заголовок и нижний колонтитул к их минимальной высоте.

И добавьте еще один div в корпус панели для прокручивающейся части.

http://jsfiddle.net/kdd7ounw/

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.panel { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.panel > div { 
 
    display: table-row; 
 
} 
 
.panel > div > div { 
 
    display: table-cell; 
 
    border: 1px solid red; 
 
} 
 
.panel .panel-body > div { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.panel-body > div > div { 
 
    overflow: auto; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="panel"> 
 
    <div class="panel-heading"> 
 
     <div>A heading with a dynamic height</div> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <div> 
 
      <div> 
 
       <p style="height:2000px">May be a lot or little content</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel-footer"> 
 
     <div>A footer with a dynamic height</div> 
 
    </div> 
 
</div>