时间戳

首页 > 解决方案 > 是否有一个页脚标签用于将其固定在底部而不隐藏其他元素

html - 是否有一个页脚标签用于将其固定在底部而不隐藏其他元素

问题描述

我创建了一个静态页面仅用于登录，我想成为底部的页脚，但是当页面缩放或在手机上时，页脚出现在内容或兄弟内容之上，我不知道如何使它适合即使在阅读了此处的一些问题和此代码之后，页面也是如此。

*{
  box-sizing: border-box;
  font-family:Courier New;
  padding:0px;
}
html {
  height:100%;
}
body {
    margin: 0px;
  position: relative;
  height:100%;
}
nav a img {
  width: 50px;
  max-width: 50px;
  margin-left:4px;
}
nav {
  display:flex;
  flex-wrap: wrap;
  align-items: center;

}
ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 20px;
}
ul li{
  list-style: none;
  padding: 8px;
  margin: 0px 3px;
  background:#3c6382;
  font-weight: bold;
  height: auto;
  border: 2px solid #3c6382;
  border-radius: 4px;
  cursor: pointer;
  width:120px;
  max-width: 100%;
  text-align: center;
}
ul li:hover {
  background:#079992;
   border: 2px solid #079992;
}
ul li a {
  text-decoration: none;
  color:snow;
}
header {
  display: flex;
  background:#222222;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.header-login {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
}
.login-f {
  margin: 0px 5px;

}
.login-f button{
  transition:0.3s all ease-in-out;
  background: snow;
  border: 0px;
  border-left:6px solid #3c6382;
  width: 85px;
  height: 35px;
  font-weight: bold;
  cursor: pointer;
   text-align:center;
   border-radius:4px;
}
.login-f button:hover{
  border-width:8px;
    background: #3c6382;
    border-left:6px solid #3c6382;
    color: snow;
}
.login-f input {
  width: 175px;
  border: 0px;
  border-top:4px solid #3c6382;
  border-radius: 3px;
  height:35px;
  padding:4px;
}
.signout-f button{
    transition:0.3s all ease-in-out;
  background: snow;
  border: 0px;
  border-left:6px solid #3c6382;
  width: 85px;
  height: 35px;
  font-weight: bold;
  cursor: pointer;
   text-align:center;
   border-radius:4px;
  margin: 0px 5px;
}
.signout-f button:hover{
   border-width:8px;
    background: #3c6382;
    border-left:6px solid #3c6382;
    color: snow;
}
.signup-l{
  background:#3c6382;
  color:snow;
  width: 80px;
  text-align: center;
  font-weight: bold;
  border: 6px solid #3c6382;
  border-radius: 3px;
  cursor: pointer;
  height: 35px;
  text-decoration:none;
  margin:0px 5px;
  padding: 3px;
  transition:0.3s all ease-in-out;

}

.signup-l:hover{
  background: snow;
  color:#222222;
  border: 6px solid snow;
}

.main-div {
  text-align: center;
  width: 550px;
  margin: 60px auto;

}
.main-div p{
  color: #ecf0f1;
    background: #2d2d2d;
  height: 35px;
  padding: 8px;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 1px 0.5px 6px #2c3e50;
}
footer{
  background: #222222;
  margin: 0px;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  color:snow;
  font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="description" content="Login Traning" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />
    <title>Login</title>
    <link rel="stylesheet" href="style/style.css"/>
  </head>
  <body>
    <!-- The Head Of Page-->
    <header>
      <!-- The Navbar Of Page-->
      <nav>
        <a class="header-logo" href="#">
          <img src="img/logo3.png" alt="logo"/>
        </a>
        <ul>
          <li><a href="index.php">Home</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">AboutMe</a></li>
        </ul>
      </nav>
        <!-- The Login Of Page-->
      <div class="header-login">
        <form class="login-f" action="includes/login.inc.php" method="post">
          <input type="text" name="userin" placeholder="Username E-mail"/>
          <input type="password" name="pwd" placeholder="Password" />
          <button type="submit" name="login-submit">Login</button>
        </form>
        <!-- The Register Of Page-->
        <a href="signup.php" class="signup-l">SignUp</a>
        <!-- The signout Of Page-->
        <form class="signout-f" action="includes/logout.inc.php" method="post">
          <button type="submit" name="logout-submit">Logout</button>
        </form>
      </div>
    </header>
    <!-- End Of Header -->
<main>
  <div class="main-div">
    <p> You'r Logged In </p>
    <p> You'r Not User </p>
  </div>
</main>
    <footer>
      <p class="p-footer">&copy; Designed By: MahmoudMansour</p>
      <script type="text/javascript" src="style/main.js"></script>
    </footer>
  </body>
</html>

标签： htmlcss

解决方案

如果您设置为body { min-height: 100%; }而不是高度，则可以解决您的问题。这将导致您的身体将 100% 地表现在您的浏览器中，除非里面的内容大于可见视口。

您可以轻松更改的另一件事是使您的footer { position: fixed; }而不是position: absolute;.

position: fixed不关心任何元素、任何包装器或position: relative父级，这意味着它是完全独立的，并且将始终出现在您告诉它出现在屏幕上的位置。

你应该做的另一件事是padding-bottom: // the size of your footer对body元素应用一些，所以当你滚动时，body 会注意元素周围的一些额外空间，这些空间总是在所有其他元素之上。

因此，总而言之，请执行以下操作：

body {
   min-height: 100%;
   padding-bottom: 40px; /* assuming 40px is the size of your footer*/
   /*...the rest of your code*/
}

footer {
   position: fixed;
   height: 40px; /* define a height here as well, in order to be more precise*/
   /*...the rest of your code*/
}

推荐阅读