Question

我使用最新版本的bootstrap创建了一个网站，并从封面模板开始。我从文档中将导航栏更改为一个，导致网页对于屏幕来说太长。在屏幕的底部有一个不同颜色的条带，似乎是一个太长的部分，看起来像下面的屏幕截图如何删除它，以便屏幕不滚动当那里没有内容时。

我不是在寻找一个永远不会滚动的解决方案，因为有时会有内容延伸到那里，但我希望它有更浅的灰色背景

这是完整的代码

    <!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

Answer 1

将 <div class="targets"> <div id="div1" class="targetDiv"><img src="//placehold.it/100x100/0bf"></div> <div id="div2" class="targetDiv"><img src="//placehold.it/100x100/f0b"></div> <div id="div3" class="targetDiv"><img src="//placehold.it/100x100/bf0"></div> </div> <a data-target="#div1" class="show">SHOW1</a> <a data-target="#div2" class="show">SHOW2</a> <a data-target="#div3" class="show">SHOW3</a> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 添加到 CSS 中的 position: fixed 元素。

以下是您的评论的更新Codepen。

Bootstrap导航栏导致网页太长

1 个答案: