如何摆脱页脚下方的这个额外部分 - Bootstrap答案

【问题标题】：How do I get rid of this extra section below the footer - Bootstrap如何摆脱页脚下方的这个额外部分 - Bootstrap
【发布时间】：2019-07-07 16:58:04
【问题描述】：

在我正在处理的网页的页脚下方，似乎有一个额外的部分（几乎是另一个 div，即蓝色区域）出现在它的下方。有关如何摆脱它以及哪些代码甚至包含它的任何指导？

第一段代码来自 signup.php 页面：

<body>
    <main>
      <div class="wrapper-main">
        <section class="section-default">
          <h1 class="h1-signup-title">Signup</h1>
          <?php
          // Here we create an error message if the user made an error trying to sign up.
          if (isset($_GET["error"])) {
            if ($_GET["error"] == "emptyfields") {
              echo '<p class="signuperror">Fill in all fields!</p>';
            }
            else if ($_GET["error"] == "invaliduidmail") {
              echo '<p class="signuperror">Invalid username and email!</p>';
            }
            else if ($_GET["error"] == "invaliduid") {
              echo '<p class="signuperror">Invalid username!</p>';
            }
            else if ($_GET["error"] == "invalidmail") {
              echo '<p class="signuperror">Invalid email!</p>';
            }
            else if ($_GET["error"] == "passwordcheck") {
              echo '<p class="signuperror">Your passwords do not match!</p>';
            }
            else if ($_GET["error"] == "usertaken") {
              echo '<p class="signuperror">Username is already taken!</p>';
            }
          }
          // Here we create a success message if the new user was created.
          else if (isset($_GET["signup"])) {
            if ($_GET["signup"] == "success") {
              echo '<p class="signupsuccess">Signup successful!</p>';
            }
          }
          ?>
          <form class="form-signup" action="includes/signup.inc.php" method="post">
            <?php
            // Here we check if the user already tried submitting data.

            // We check username.
            if (!empty($_GET["uid"])) {
              echo '<input type="text" name="uid" placeholder="Username" value="'.$_GET["uid"].'">';
            }
            else {
              echo '<input type="text" name="uid" placeholder="Username">';
            }

            // We check e-mail.
            if (!empty($_GET["mail"])) {
              echo '<input type="text" name="mail" placeholder="Email" value="'.$_GET["mail"].'">';
            }
            else {
              echo '<input type="text" name="mail" placeholder="Email">';
            }
            ?>
            <input type="password" name="pwd" placeholder="Password">
            <input type="password" name="pwd-repeat" placeholder="Repeat password">
            <button type="submit" name="signup-submit">Signup</button>
          </form>



          <!--Here we create the form which starts the password recovery process!-->
          <?php
          if (isset($_GET["newpwd"])) {
            if ($_GET["newpwd"] == "passwordupdated") {
              echo '<p class="signupsuccess">Your password has been reset!</p>';
            }
          }
          ?>

          <a class="p-forgetpwd" href="reset-password.php">Forgot your password?</a>
        </section>
      </div>
    </main>


</body>
</html>


<?php
  require "footer.php";
?>

第二段代码来自footer.php代码：

<hr class="my-0 border-white">
<footer class="site-footer d-flex justify-content-center">
    <section class="social-links py-3 text-center">
        <ul class="list-inline">
        <li class="list-inline-item"><a href="https://www.facebook.com" class="fa fa-facebook" target="_blank"></a></li>
        <li class="list-inline-item"><a href="https://twitter.com" class="fa fa-twitter" target="_blank"></a></li>
        <li class="list-inline-item"><a href="https://www.pinterest.co.uk" class="fa fa-pinterest" target="_blank"></a></li>
        <li class="list-inline-item"><a href="https://www.instagram.com" class="fa fa-instagram" target="_blank"></a></li>
        </ul>
        <span> &copy; iStudy 2018</span>
    </section>
</footer>

更新：与 signup.php 页面代码链接的 CSS：

.wrapper-main {
  width: 900px;
  margin: 0 auto;
}

.section-default {
  width: 100%;
  padding: 20px;
  border-radius: 6px;
  background-color: #FFF;
}

.h1-signup-title { /* For the signup form page */
  text-align: center;
  font-size: 26px;
  font-family: arial;
  color: black;
}

.form-signup {
  margin: 0 auto;
  padding-top: 20px;
  width: 200px;
}

.form-signup input {
  width: calc(100% - 30px);
  height: 30px;
  padding: 0 15px;
  margin-bottom: 6px;
  border: 1px solid #CCC;
  border-radius: 4px;
  background-color: #F6F6F6;
  float: left;
  font-family: arial;
}

.form-signup button {
  display: block;
  height: 40px;
  padding: 0 10px;
  margin: 0 auto;
  border: none;
  border-radius: 4px;
  background-color: #333;
  font-family: arial;
  font-size: 13px;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
}

main {
  padding-top: 20px;
}

.wrapper-main {
  width: 900px;
  margin: 0 auto;
}

【问题讨论】：

你能在我们可以运行的 sn-p 中重新创建它吗？
你说的是底部的蓝色部分吗？
您需要将基本的 sn-p 包含在您可能拥有的任何其他非 bootstrap4 CSS 中。因为该间距可能很简单，因为没有足够的内容来下推页脚。
@imvain2 我想你搞定了，背景可能设置为<main> 或<body> 标签上的那种蓝色，并且没有足够的内容将页脚推到底部.
是的@Ice76。非常感谢你们的 cmets，所以标签只应用了一些颜色设置，没有填充。但是我发现
标签应用了一些样式。当您尝试按照 YouTube 教程进行操作，然后为自己设计样式时，就会发生这种情况。

标签： php html css bootstrap-4

【解决方案1】：

要解决您的问题，您需要将页脚强制置于底部。无论页面上有多少内容，这将始终将您的页脚保持在网站的底部。请注意，您需要计算并输入页脚的高度。

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
}

【讨论】：

谢谢@imvain2，我试过了，它确实把它往下推，但是它只会增加页脚的实际大小，所以我将高度设置为 180px；这让它达到了它需要的位置，但它对于页脚来说看起来非常高，但它确实有效，所以谢谢你。我会玩一会儿。