Question

在我正在处理的网页上的页脚下方，似乎在其下方显示了一个额外的部分（几乎是另一个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;
}

Answer 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;
}

如何摆脱页脚下方的这一多余部分-Bootstrap

1 个答案: