Full height content block width sticky footer

Problem is trivial (I am sure there must be plenty of solutions, but can't find proper one myself (honestly))

I need simple header->content->footer page, like this

<div class="container">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

Where header footer is sticky to botom (not fixed position, if there is no content it's on bottom, if there is, It must move depending on content block height.

What I've tried

header and footer are absolute with top and bottom properties, content have padding from top and bottom same as header and footer height but it doesn't work as I want to.

Jsfiddle example: https://jsfiddle.net/xwjhn7ej/