如何使页脚停留在页面底部

Question

我试图让页脚停留在页面底部，位置绝对，因为我只是不喜欢使用固定位置。出于某种原因，只有重新启动网站但使用太多的CSS代码，我才能使它正常工作，由于某种原因，它不会触底……这是我的代码

html,
body {
  background-color: silver;
  height: 100%;
}

.footer {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(includes/pictures/pianobanner.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding-top: 90px;
  padding-bottom: 90px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  position: fixed;
  bottom: 0;
  width: 100%;
}

<div class="footer">
  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 text-center">
          <div class="social-icon">
            <a href=""><i class="fab fa-facebook"></i></a>
            <a href=""><i class="fab fa-twitter"></i></a>
            <a href=""><i class="fab fa-google-plus"></i></a>
            <a href=""><i class="fab fa-pinterest"></i></a>
            <a href=""><i class="fas fa-rss"></i></a>
            <a href=""><i class="fab fa-linkedin"></i></a>
            <a href=""><i class="fab fa-vimeo-square"></i></a>
            <a href=""><i class="fab fa-youtube-square"></i></a>
            <a href=""><i class="fab fa-dribbble"></i></a>
          </div>
          <div class="copyright">
            <p class="white">&copy; <b>PianoCourse101</b>
            </p>
            <div class="bordernow"></div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

我尝试使用css技巧方法和一些youtube方法，但似乎都无法使用。...我在单独的页面上也有页脚，并且一直在使用include_once'footer.php';我的包装程序应该在索引页面中吗？

Answer 1

如果要将其放置在视口的底部，可以将其制成

position: absolute; height: 10%; top: 90%;

例如。

Answer 2

您可以尝试一下flex：

.footer{
   display: flex;
   flex-direction: column;
   align-item: flex-end;
}