Question

我想把我的页脚放在底部：

body, html{position:relative;}
footer{position:absolute;}

但事情仍然很奇怪。即使footer完成，bottom: 0;也不会置于最底层。任何人都可以帮我调试吗？ JSBin here和JSFiddle here。

Answer 1

您需要为身体元素设置高度或最小高度以覆盖孔页面。然后页脚会移到屏幕的底部。

＆＃13;

html, body {
  margin: 0;
  padding: 0;
  transition: all 1s;
  font-family: "Trebuchet MS";
  position:relative;
  min-height:100vh;
}

footer{background-color:blue;width:100%;height:50px;position:absolute;bottom:0;}

＆＃13;

<body>
<header id="header">
      <ul id="logo">
        <li><i></i></li>
      </ul>
      <nav>
        <ul>
          <li><a href="login.php">login</a></li><!--
          --><li><a href="signup.php">signup</a></li>
        </ul>
      </nav>
    </header>

    <main id="main">
      <div id="login-form">
        
        <form method="POST" onsubmit="return ValidateEmail();">
          <i id="login-image"></i>
          <span id="username-container"><input type="text" name="email" required="required" class="text" placeholder="Username / Email" onkeyup="ValidateEmail()" /><br/><span id="idea"></span></span>
          <span id="password-container"><input type="password" name="password" required="required" class="text" placeholder="Password" /><span id="toggle-password"></span></span><br/>
          <input type="submit" name="submit" value="Login" /><a href="/">Signup now ?</a>
        </form>
      </div>
    </main>


    <footer>
      <i>COPYRIGHT &copy; 2017</i>
    </footer>
  <body>

＆＃13;

Answer 2

向班级添加宽度，高度（和颜色！）。

footer {
  background-color: black;
  margin: 0!important;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  color: white;
}

为什么绝对定位不起作用？

2 个答案: