<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css">
<style>
html, body { margin: 0; height: 100%; }
.extLayer { display: flex; backgound: gold; height: 100%; }
.extLayer .navMgr { background: tomato; flex: 0 0 30px; }
.extLayer .endoLayer { background: gray; flex: 1; display: flex; flex-direction: column; }
.topSideBar { height: 50px; background: yellow; }
.intLayer { flex: 1; background: cyan; display: flex; }
.navigator { flex: 0 0 auto/*100px*/; background-color: green; }
.auxLayer { flex: 1; display: flex; flex-direction: column; background: red; }
.tabs { height: 50px; background: pink; }
.coreLayer { flex: 1; background: magenta; }
</style>
</head>
<body>
<div class="extLayer">
<nav class="navMgr">side</nav>
<div class="endoLayer">
<header class="topSideBar"> top side bar </header>
<div class="intLayer">
<nav class="navigator"> navigator </nav>
<section class="auxLayer">
<div class="tabs"> TABS </div>
<main class="coreLayer">
MAIN
</main>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(".navigator").resizable({handles: "e"}).removeAttr('height');
//document.querySelector('.navigator').removeAttribute('height');
});
</script>
</body>
</html>