I recently constructed a website using the latest version of Bootstrap, commencing with the cover template. After swapping the navbar with one from the documentation, I noticed that the webpage now extends beyond the screen's length. At the end of the screen, a strip of a different color appears, which seems to be the part responsible for the scrolling, as depicted in the screenshot below https://i.sstatic.net/OaQ28.png. How can I eliminate this extra length so that the screen stays fixed when there is no additional content?
I'm not seeking a permanent solution preventing scrolling, as there might be instances where content extends to that point. However, I would like to maintain the lighter grey background.
Below is the complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Past Paper Website</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- AJAX Code -->
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","Ajax_bootstrap_0.php?q="+str,true);
xmlhttp.send();
}
}
function runUser(str) {
if (str == "") {
document.getElementById("show").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("show").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","Ajax_bootstrap.php?second="+str,true);
xmlhttp.send();
}
}
</script>
<style type="text/css">
body { background: #404040 !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<style type="text/css">
body {
overflow-x:hidden;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark #404040">
<a class="navbar-brand" href="#">Past Paper Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Areas to improve</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add Paper</a>
</li>
</ul>
</div>
</nav>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<!-- Dropdown -->
<form>
<div class="form-group row">
<div class="col-sm-2"></div>
<label for="chooseyear" class="col-sm-1 col-form-label">Subject</label>
<div class="col-sm-7">
<div class="col-sm-2"></div>
<select class="form-control" name="users" onchange="showUser(this.value)" id="chooseyear">
<option value="">Select a Subject:</option>
<?php
$extract="Done";
include("database_info.php");
$servername = servername;
$username = username;
$password = password;
$dbname = dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("" . $conn->connect_error);
}
echo "";
$sql = "SELECT DISTINCT Subject FROM Papers";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value=".$row["Subject"].">".$row["Subject"]."</option>", "\n";
}
}
$conn->close();
?>
</div>
</select>
</form>
</div>
</div>
<br>
<!-- Table -->
<div id="txtHint"><b>Select a Subject</b></div>
</div>
<div class="mastfoot">
<div class="inner">
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
Codepen: https://codepen.io/anon/pen/ypPKOZ