Как я могу получить липкий нижний колонтитул внутри div с ячейкой таблицы?

Question

У меня есть простой 2-х столбчатый макет, который выглядит следующим образом, и теперь я хочу липкий нижний колонтитул внутри правого столбца моего макета.

<div class="table"> 
    <div class="cell"> 
     <!-- some other stuff --> 
    </div> 
    <div class="cell"> 
     <header class="row">Header</header> 
     <main class="row expanded">Main</main> 
     <footer class="row">Footer</footer> 
    </div> 
</div> 

определение Класс:

.table { 
    display: table; 
    height:100%; 
    table-layout: fixed; 
    border-collapse: collapse; 
} 

.cell { 
    border: 2px solid black; 
    vertical-align: top; 
    display: table-cell; 
    height:100%; 
} 

.row { 
    display: table-row; 
} 

.expanded { 
    height: 100%; 
} 

См скрипка: https://jsfiddle.net/k1zjjwze/

Как вы можете видеть, что я использовал дисплей: настольные ячейки, чтобы получить полную высоту 2 расположения колонка (я знаю, что я может использовать flexbox для этого, но еще нет). Теперь я хочу липкий нижний колонтитул в правой колонке моего макета, поэтому я установил контейнер заголовка, основного и нижнего колонтитула для отображения: table-row и расширил основной контейнер до высоты: 100%, но это не работает, может кто-то скажите, как я могу достичь того, чего хочу?

Answer 1

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

Отказ от ответственности: Я практически уверен, что есть лучший способ сделать это.

HTML для второй ячейки

<div class="cell rel"> 
    <header class="row">Header</header> 
    <main class="row expanded">Main</main> 
    <footer class="row">Footer</footer> 
</div> 

CSS

.rel{position:relative;} 

footer { 
    border: 1px solid yellow; 
    position:absolute; 
    bottom:0px; 
} 

https://jsfiddle.net/k1zjjwze/2/

Answer 2

Черт, я нашел решение, я просто добавить другую таблицу обертку в вторая колонка:

<div class="table"> 
    <div class="cell"> 
     <!-- some other stuff --> 
    </div> 
    <div class="cell"> 
     <div class="table"> 
      <header class="row">Header</header> 
      <main class="row expanded">Main</main> 
      <footer class="row">Footer</footer> 
     </div> 
    </div> 
</div> 

Смотрите обновленную скрипку: https://jsfiddle.net/k1zjjwze/1/