function adjustHeight(){
var headerHeight=$(element).find('.header').outerHeight();
console.log(headerHeight);
var temp=$(window).height()-headerHeight;
console.log(temp);
$('.users').height(temp);
}
Make sure to call the adjustHeight function initially and on window resize events.
The height of the .users element is consistently 30 pixels more than the value stored in the temp variable.
$('.users').css('height',temp+'px');
Everything is working as intended.
<div class="mainPage" data-bind="visible:mode() === 'authenticated',handleHeightOfElements:''">
<div class="header">
<div>
This is header text
</div>
</div>
<div class="mainBody">
<div class="users">
All users:
<div data-bind="foreach:userList">
<div class="user">
<span data-bind="text:$data.userName,css:{onlineUser:$data.online()}">
</span>
</div>
</div>
</div>
.users{
float: left;
width: 140px;
background: antiquewhite;
padding: 15px;
box-sizing:border-box;
}