How can I get a sticky footer inside a div with table cell?

Question

I have build a simple 2 column layout which looks like the following example and now I want a sticky footer inside the right column of my layout.

<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>

Class definitions:

.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%;
}

See fiddle: https://jsfiddle.net/k1zjjwze/

As you can see I have used display: table-cell to get a full height 2 column layout (I know that I can use flexbox for this, too - but not yet). Now I want a sticky footer inside the right column of my layout, so I have set the header, main and footer container to display: table-row and expanded the main container to height: 100%, but this is not working, can someone tell me how I can achieve what I want?

Answer 1

I was able to accomplish this by giving the second cell a relative positioning. Once that's done, you can give the footer cell an absolute positioning, and set it's bottom to 0px.

Disclaimer: I'm virtually positive there is a better way to do this.

HTML For Second Cell

<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/