JSFiddle - React, Tailwind, and code Playground
HTML
<div id="tabs" class="ui-layout-center">
<ul>
<li><a href="#tab-1">Tab #1</a>
</li>
<li><a href="#tab-2">Tab #1</a>
</li>
</ul>
<div id="tab-1" class="customPanel">This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
</div>
<div id="tab-2" class="customPanel">This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
This content shall: fill up the entire space (left to right) until the bottom of the page. But it...
CSS
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#tabs {
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
overflow:auto;
}
#tabs .customPanel {
background: green;
}
}
JavaScript
$(function () {
var tabs = $("#tabs").tabs({});
});