个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 06:31:09 25 4
gpt4 key购买 nike

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

Screenshot of extra section I don't want in blue (under the green footer)

第一段代码来自 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;
}

最佳答案

要解决您的问题，您需要将页脚强制置于底部。无论页面上有多少内容，这都会使页脚始终位于网站底部。请注意，您需要确定并输入页脚的高度。

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

关于php - 如何摆脱页脚下方的这个额外部分 - Bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54677309/

25 4 0
文章推荐： c - 将结构放入 C 中的数组元素中
文章推荐： python - 通过 IMAP 添加自定义 RFC822 header ？
文章推荐： python - Pylons 分页器问题
文章推荐： C编译IO错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com