Bootstrap Responsive Layout isn't working with Calc CSS function - html

Question

I am building a webpage with HTML & CSS, using the bootstrap framework. It is based on the grid layout system. I would like to have my navbar and first row of my grid in a group and the second row in a group, where each group fills 100% of the screen height. I can't see how a div definition would work as it spans the middle of two div classes. I have tried this, using the calc function, but it doesn't seem to be working.
Here is a JSFiddle. (NB: try expanding the output window to show the problem properly)
<div class="PageView">
<nav class="navbar navbar-default">
<div class="container-fluid" id="logoStripe">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav links">
<li>About<span class="sr-only">(current)</span>
</li>
<li>Pre-Order
</li>
<img src="Images/Logo.png" alt="Logo" style="width:auto; height:75px; padding-top:5px; padding-bottom:5px;">
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="PageView">
<div class="row">
<div class="col-md-12">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-6">Button 1 (align Right)</div>
<div class="col-md-6">Button 2 (align Left)</div>
</div>
</div>
</div>
and the CSS:
.links {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 28px;
color: #FFFFFF;
}
#logoStripe {
background-color: #54534a;
}
.PageView {
height: calc(100% - 75px);
}
Can anyone see what I have done wrong? Any ideas would be much appreciated.

Answer 1

Percentage heights calculate from their parents height so you have to start from the most parent element and cascade it down to the element you want with the modified height. You also have two divs with .PageView that cannot use the same CSS to work properly; I'm not sure if this was done on purpose.
Also, if you are using calc, you will need to adjust the pixel amount for each of Bootstrap's breakpoints.
html, body, .PageView {
height:100%;
}
.links {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 28px;
color: #FFFFFF;
}
#logoStripe {
background-color: #54534a;
}
.adjustedHeight {
height: calc(100% - 77px);
background-color:red; /* For emphasis */
}
.PageView .navbar {
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="PageView">
<nav class="navbar navbar-default">
<div class="container-fluid" id="logoStripe">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav links">
<li>About<span class="sr-only">(current)</span>
</li>
<li>Pre-Order
</li>
<img src="Images/Logo.png" alt="Logo" style="width:auto; height:75px; padding-top:5px; padding-bottom:5px;">
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid adjustedHeight">
<div class="PageView2">
<div class="row">
<div class="col-md-12">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-6">Button 1 (align Right)</div>
<div class="col-md-6">Button 2 (align Left)</div>
</div>
</div>
</div>