Question

我希望页脚停留在页面底部，但底部不会显示。它会移到旁边或靠近导航的顶部，或者，如果它显示在页面底部，那么它的背景渐变颜色也会应用到上面的div元素。

我尝试了以下代码：

body::after {
    content: '';
    display: block;
    height: 90px;
}

#footerindex {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
}

Second code-

#footer {clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;

}

 <footer style="background: linear-gradient(to bottom, #4e54c8, #8f94fb)">
    <div id="footerindex">
      <a href="terms.html"> Terms and conditions </a> <a href="privacy.html" style="padding-left: 15px;">Privacy Policy</a> 
      <p>&#169; Copyright 2019 - jobg.xyz, All Rights Reserved. </p>
      <p>Website designed and developed by Riven Apwbihls</p>
    </div>
  </footer>

Answer 1

您可以使用flexbox。有关Flexbox的快速信息，请单击here。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

nav {
  height: 50px;
  width: 100vw;
  background-color: green;
}

main {
  width: 100vw;
  flex: 1;
}

footer {
  height: 50px;
  width: 100vw;
  background-color: grey;
}

<body>
  <nav>
    Nav
  </nav>
  <main>
    Main
  </main>
  <footer>
    Footer
  </footer>
</body>

flex: 1调整main元素的大小以占用剩余空间。

Answer 2

将您的#footerindex CSS添加到footer

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
}

body::after {
    content: '';
    display: block;
    height: 90px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
}

#footer {clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;

}

<footer style="background: linear-gradient(to bottom, #4e54c8, #8f94fb)">
    <div id="footerindex">
      <a href="terms.html"> Terms and conditions </a> <a href="privacy.html" style="padding-left: 15px;">Privacy Policy</a> 
      <p>&#169; Copyright 2019 - jobg.xyz, All Rights Reserved. </p>
      <p>Website designed and developed by Riven Apwbihls</p>
    </div>
  </footer>

html页脚元素未定位在底部？

2 个答案: