页脚不会停留在底部

Question

我正在更新我在课程中完成的旧项目。我们必须在该项目中使用把手，而页脚给我带来了问题。如果我没有在其上放置位置，它将停留在内容较长的页面底部，但对于内容较短的其余页面，它会位于页面的中间。如果我设置position:absolute和bottom:0，问题就会翻转，它位于较长内容页面的页面中间，但位于较短内容页面的底部。

我身上有最小高度：100vh

这是页脚。把手：

<footer class='footer footer-center p-5'>
 <div class='grid grid-flow-col'>
  <a class='link link-hover text about-us-footer' a href='/aboutus'>About Us</a>
 </div> 
 <div>
   <div class='grid grid-flow-col github'>
     <a href='https://github.com/caitlinramsey/borrowhood-cr'  target='_blank'><i class='fa fa-                                                  github' style='font-size:50px; color:black;'></i></a>
   </div>
 </div> 
 <div>
   <p class='text copyright'>Copyright © 2023 - All right reserved by Borrowhood</p>
 </div>
</footer>

这是当前的 CSS，尽管我已经尝试了多种方法：

footer {
  background-color: var(--secondary);
  height: 250px;
  position: absolute;
  bottom: 0;
}

非常感谢任何帮助！

我希望页脚位于页面底部，无论页面长度如何。

Answer 1

您可以将位置更改为固定，以便它在任何页面高度都位于底部，如果不需要，可以删除高度，这样就不会有任何额外的空间。

footer {
  background-color: var(--secondary);
  height: 250px;
  position: absolute;
  bottom: 0;
}