____________________________________________
|         HEADER 1                           |
|________breaks to new line__________________|
|____________________________HEADER2_________|
|                                         | ||
|                                         | ||
|    This is my scroller                  | ||
|                                         | ||
|                                         | ||
|                                         | ||
|_________________________________________|_||
|     Some                                   |
|_____Footer_________________________________|

<div class="wrapper">
    <div class="header">
        Some<br/>
        Header
    </div>
    <div class="scroller">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    ...
    </div>
    <div class="footer">
        Some<br/>
        Footer
    </div>
</div>

body{
    height:100%;
}
.wrapper{
    height:400px;
    border-left:1px solid red;
}
.header, .footer{
    background-color: #EEE;
    height:27px;
}
.scroller{
    height:calc(100% - 54px);
    background-color: #CCC;
    overflow:auto;
}

<div class="wrapper">
    <div class="tr stretch">
        <div class="td">a header</div>
    </div>
    <div class="tr">
        <div class="td">
            <div class="contentWrapper">
                <div class="content">
                    content 0
                    ...............
                    ...............
                    ...............
                    content 29
                </div>
            </div>
        </div>
    </div>
    <div class="tr stretch">
        <div class="td stretch">a footer</div>
    </div>
</div>

.wrapper {
    height  : 200px;
    width   : 200px;
    display : table;
}

.tr { display : table-row; }

.td { display : table-cell; }

.stretch { height : 1%; }

.contentWrapper {
    position   : relative;
    overflow-y : scroll;
    height     : 100%;
}

.content {
    position : absolute;
    right    : 0;
    left     : 0;
}

$(document).ready(function(){
    $('.scroller').css("margin-top", $('.header').height());

    var height = $('.wrapper').height() - ($('.footer').height() + $('.header').height());

    $('.scroller').css("height", height);
});

.wrapper{
    height:400px;
    border-left:1px solid red;
    position: relative;
}

.header, .footer, .scroller {
    background-color: #EEE;
    position:absolute;
    width: 100%;
}
.footer {
    bottom: 0;
}

.scroller{
    background-color: #CCC;
    overflow:auto;
}

$(document).ready(function(){
    $('.scroller').css("top", $('.header').height());
    $('.scroller').css("bottom", $('.footer').height());
});

$(document).ready(function(){
    $('.scroller').css("padding-top", $('.header').height());
});

var CalcHeight = function() {
    this.init = function() {
        var totHeight = $('body').height();
        var componentsHeight = $('.headers').height() + $('.footers').height();
        var diff = totHeight - componentsHeight;
        $('.hider').css({
            height: diff
        });
    }

    this.init();
}

var calcHeight = new CalcHeight;

<div class="wrapper">
    <div class="header">
        Some<br/>
        Header
    </div>
    <div class="scroller">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    ...
    </div>
    <div class="footer">
        Some<br/>
        Footer
    </div>
</div>

.wrapper{
    height:400px;
    border-left:1px solid red;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: [header] auto [content]1fr [footer]auto;
}
.header{
    background-color: #EEE;
    grid-row: header;
}
.footer{
    background-color: #EEE;
    grid-row: footer;
}
.scroller{
    background-color: #CCC;
    overflow:auto;
    grid-row: content
}