I found a nearly-perfect design using the code below:
https://i.sstatic.net/56i2E.png
This code provides the layout mentioned:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<style>
body {
height: 100vh;
min-height: 100%;
border: 20px dashed gray;
}
.fullheight { min-height: 100%; }
.left, .middle, .right { min-height: 100vh; }
.left { border: 20px dashed red; }
.middle { border: 20px dashed green; }
.right { border: 20px dashed blue; }
</style>
</head>
<body>
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="left col-xs-4 col-md-4">
<h2 class="text-center">Left</h2>
</div>
<div class="middle col-xs-4 col-md-4">
<h2 class="text-center">Middle</h2>
</div>
<div class="right col-xs-4 col-md-4">
<h2 class="text-center">Right</h2>
</div>
</div>
</div>
</body>
This question is a continuation of this topic.
The potential solution can be seen in the response here. I tried to address the final issue where the left/middle/right boxes exceed their containing DIV.
A comment suggested:
calc(100vh - 40px)
What exactly does calc() signify within a CSS file? Also, how can I prevent the appearance of a vertical scroll bar? Its presence suggests that the content extends beyond 100vh.