Holly Grail

by D7460N

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js"></script>
<body class="container-fluid d-flex flex-column px-0">
	<nav class="page-header navbar navbar-expand-md navbar-dark bg-dark">HEADER</nav>
	<main class="row flex-fill no-gutters flex-nowrap">
		<div class="col d-flex flex-column filter">FILTER</div>
		<div class="col d-flex flex-column content split-horizontal results">RESULTS</div>
		<div class="col d-flex flex-column content split-horizontal profile">PROFILE</div>
		<div class="col d-flex flex-column content split-horizontal details">DETAILS</div>
	</main>
	<div class="page-footer bg-dark p-2">FOOTER</div>
	
</body>

CSS

/********************
    LAYOUT
*********************/

html, body {
min-height: 100vh; /* force footer to bottom of browser */
height: 100%;  /*for IE11*/
}
.gutter {
     background-color: transparent;
     background-repeat: no-repeat;
     background-position: 50%;
	 flex: 0 0 20px;
 }
.gutter.gutter-horizontal {
    cursor: col-resize;
	background-image: url('../grips/vertical.png');
}
.filter {
  flex: 0 0 250px;
}
.results {
  flex: 1 1 auto;
  background: #838383;
  color: white;
}
.profile {
  flex: 1 1 auto;
  background: #eee;
}
.details {
	width: 200px;
	flex: 1 1 auto;
	background-color: rgba(0,0,0,0.3);
}

JavaScript

/*$(".results").resizable({
  handleSelector: ".splitter",
  resizeHeight: false
});*/
Split(['.results', '.profile', '.details'], {
		//sizes: [0, 100, 0],
        //gutterSize: 20,
		//minSize: [400, 200, 300],
		//cursor: 'col-resize',
    });
	
/*Split(['.results', '.profile', '.details'], {
    elementStyle: function(dimension, size, gutterSize) {
        return {
            'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)',
        }
    },
    gutterStyle: function(dimension, gutterSize) {
        return {
            'flex-basis': gutterSize + 'px',
        }
    },
})*/