how to fit content in browse height

Question

i want make contentarea height browser window hight but minus top and bottom div height also so then i will be fit in properly. i already did some via jquery but i am always 15px extra height. any idea how i can fix that.

may be can direct put px in js or may be just minus 15px more.

demo http://jsfiddle.net/cyber007/1y06jssp/

bellow is js. it minus from class topbar and topbar2 but still i am getting 15px more space.

 $(window).on('resize', function(){

        var h = $(this).height() - $('.topbar').height() - $('.topbar2').height();
        if(h<=400) h=400
        $('.contentarea').height(h); 


    }).trigger('resize');

Answer 1

It seems to me that the padding added to the topbar is what is appending the extra pixels so just take out the padding or change it up to your fit

.topbar {
    background-color: #1f1f1f;
    border-top: solid 3px #0b0b0b;
    width: 100%;
    min-height: 56px;
    position: relative;
    z-index: 2;
}

JSFiddle