CSS height for content area - css

Question

I'm trying to compose the layout shown at the picture. I want the layout cover the whole browser area.
My issue is that can not get the content be fixed to the footer. Even in case the browser resizes, the content div auto-adjust dynamically.
The class in the content div has its height to 100vh, but it exceeds and the window scroller comes up.
Then I use calc(100vh-100px) where 100px is the sum(headerHeight + footerHeight), but no success.
Is there anyway to accomplish this without jQuery?
EDIT:
HTML:
<div ng-app="app" layout="column" layout-fill ng-cloak>
<header>
<div class="main_header" ng-controller="headerCtrl as ctrl">
<img src="/img/Logo.png" width="300" height="60" alt="Logo" />
<div style="min-width:200px;width:60%" ng-controller="autocompleteCtrl">
<md-autocomplete class="search_box"
md-selected-item="selectedItem"
md-search-text="searchText"
md-items="item in querySearch(searchText)"
md-search-text-change="querySearch(searchText)"
md-item-text="item.value"
md-min-length="2"
md-autofocus="true"
md-no-cache="false"
placeholder="Search...." my-enter>
<md-item-template>
<span>{{item.value}}</span>
</md-item-template>
<md-not-found>
No matches found.
</md-not-found>
</md-autocomplete>
</div>
<div class="main_header_buttons_container">
<md-button class="md-raised md-primary" ng-click="showLoginPopup($event)" ng-show="!isSessionActive">Log in</md-button>
<md-button class="md-raised md-primary" ng-click="showRegisterPopup($event)" ng-show="!isSessionActive">Register</md-button>
<md-button class="md-raised md-primary" ng-click="closeSession($event)" ng-show="isSessionActive">Close Session</md-button>
</div>
</div>
</header>
<div class="main_body" layout="row">
<div ng-controller="sidebarCtrl">
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="true">
<div layout="column" layout-align="start end" style="margin-top:50px">
<md-icon md-svg-src="/img/magnifying-glass-browser.svg" class="icon_search <?php echo $sidebar_option=='1'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='1'?'':'change_menu(1)'; ?>"></md-icon>
<md-icon md-svg-src="/img/favorites_icon.svg" class="icon_favorites <?php echo $sidebar_option=='2'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='2'?'':'change_menu(2)'; ?>"></md-icon>
<md-icon md-svg-src="/img/historical_icon.svg" class="icon_favorites <?php echo $sidebar_option=='3'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='3'?'':'change_menu(3)'; ?>"></md-icon>
<md-icon md-svg-src="/img/collections_icon.svg" class="icon_favorites <?php echo $sidebar_option=='4'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='4'?'':'change_menu(4)'; ?>"></md-icon>
</div>
</md-sidenav>
</div>
<md-content flex layout-padding class="remove-padding-around">
<div class="collections_content_area" layout="column" layout-fill layout-align="top left">
The content (blue area)
</div>
</md-content>
</div>
<footer>
<div layout="row" layout-align="center center">
<h4>My Awesome Footer</h4>
</div>
</footer>
CSS:
.main_header {
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #F2F2F2;
}
.main_header_buttons_container {
width: 20%;
min-width: 250px;
text-align: center;
}
.main_body {
background-color: #CCC;
}
.collections_content_area {
height:98vh;
background-color: #ebeef0;
min-height:450px;
}

Answer 1

If I read it correctly, this is what you're after. flexbox (in combination with calc) is very useful to achieve layouts like these. See the code below.
body, html {
height: 100vh;
margin: 0;
}
.container {
height: 100%;
}
.top-bar, .foot-bar {
height: 50px;
}
.main-content {
height: calc(100% - 100px);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.side-bar, .main-bar {
height: 100%;
}
.side-bar {
width: 100px;
}
.main-bar {
overflow-y: scroll;
font-size: 20px;
width: calc(100% - 100px);
}
.top-bar {
background: green;
}
.side-bar {
background: red;
}
.main-bar {
background: darkred;
}
.foot-bar {
background: limegreen;
}
<div class="container">
<div class="top-bar"></div>
<div class="main-content">
<div class="side-bar"></div>
<div class="main-bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero deserunt repellat asperiores optio esse et voluptas ad, autem possimus beatae labore nam natus, tempora expedita. Voluptatum optio architecto aut quas culpa magni, quis, sapiente tenetur quisquam nobis. Aliquam, nesciunt. Explicabo numquam ipsa saepe cupiditate temporibus amet ratione velit, repellat quaerat, tempore expedita eius sit aliquid neque impedit quia soluta repellendus architecto nihil ducimus, quas odio inventore consectetur nostrum. Enim eum voluptate veritatis hic quia nemo maiores a accusantium explicabo labore aliquid iusto autem iure sed blanditiis debitis dicta porro, dolore vero ut natus, obcaecati molestiae! Animi reiciendis dolorum officiis nostrum deserunt eaque nihil impedit natus placeat iusto aspernatur quae velit rem asperiores fugiat rerum, nobis pariatur. Recusandae itaque rem repudiandae placeat eum, delectus, facilis, provident, praesentium adipisci aut sed. Numquam dolorem ad, alias molestias illum iure. Obcaecati nam harum iure recusandae, voluptatem. Totam officia sit dolorem! Aliquam quod blanditiis, architecto placeat officia maxime, nam aliquid commodi nemo fugit fugiat, quis modi reprehenderit mollitia ducimus iusto! Illum cumque a aliquam, odit officia delectus iusto hic eligendi maiores laborum soluta fugiat nihil itaque quo iste quasi rem numquam. Tenetur asperiores odit dignissimos aliquam error, aliquid illum magnam eius libero. Vel, quae sint?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus mollitia sapiente distinctio consequatur ab laboriosam corporis dignissimos facilis voluptatum odio, amet praesentium quisquam expedita nisi doloribus sunt! Voluptatum, aperiam, quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe facere aliquid fuga pariatur praesentium corporis recusandae, incidunt a cupiditate sint eum omnis adipisci rerum non! Accusantium quaerat ipsum, pariatur quae molestiae, culpa laborum! Obcaecati, laudantium provident aliquid asperiores repellat, distinctio quisquam earum, dolores quasi rerum facilis quaerat, minus aspernatur sapiente rem ipsum id. Temporibus eligendi, itaque quae aliquam, deserunt at veritatis sequi, ab cum molestias praesentium alias. Minima inventore, expedita quasi doloremque quod quis nostrum vero ullam velit. Voluptate totam magni ipsum corrupti, nobis, eveniet nesciunt veniam ipsa aut non nemo cumque dicta harum placeat mollitia. Aut libero reiciendis consequuntur.</div>
</div>
<div class="foot-bar"></div>
</div>

Answer 2

he is something i just made last night which make the footer fixed at bottom and ur body area can still be dynamic according to the contents in it
function main() {
var $window = $(window).outerHeight(true);
var $footer = $('.footer').outerHeight(true);
var $header = $('.header').outerHeight(true);
var $total = $window - ($header + $footer);
// .main is the content area
$(".main").css({
"min-height": $total + 'px'
// "min-height": 100 - ($total/100) + 'vh'
});
}
$(document).ready(function() {
main();
});
$(window).resize(function() {
main();
});
one thing to keep in mind that converting px to vh doesnt happen on the fly , not in css nor in js