Despite attempting a solution from this source, I am still encountering an issue.
My ASP.net page layout looks like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="ToolDesign.Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Availability Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section4 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
<!-- make page stretch -->
html, body {
height: 100%;
}
.container-fluid {
height: 100%;
overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
min-height: 100%;
overflow-y: hidden; /* don't show content that exceeds my height */
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Availability Tool</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Home</a></li>
<li><a href="#section2">Availability Test</a></li>
<li><a href="#section3">Monitoring</a></li>
<li><a href="#section4">About</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Home section</h1>
<p>Greeting text</p>
</div>
<div id="section2" class="container-fluid">
<h1>Availability section</h1>
</div>
<div id="section3" class="container-fluid">
<h1 style="text-align: center; font-size: 300%;; vertical-align: middle; line-height: 90px; margin-top: 100px;">Soon..</h1>
</div>
<div id="section4" class="container-fluid">
<h1>About</h1>
<p>Tool version and team name</p>
</div>
</body>
</html>The problem lies in the height not filling the entire screen, as indicated in the screenshot below:
https://i.sstatic.net/gTbwc.png
I am using the most recent version of Bootstrap 3.3.7