如何将页脚定位始终位于页面底部？

Question

我希望我的页脚位于页面底部，即使页面上没有足够的元素将其向下推。我尝试了

position: fixed

与

bottom: 0

，但这使得当有元素填充页面时它保持在那里。

如何让页脚在页面满时位于所有元素的底部，而在页面未满时位于屏幕底部？

Answer 1

在导航和页脚之间创建一个 div，然后将 div 的高度设置为 100vh 或屏幕，这样它就可以工作了。

CSS

.main-content {
  height: 100vh;
 }

HTML

<nav></nav>
<div class="main-content">
 <h1>Welcome to my website!</h1>
 <p>This is some sample content.</p>
 </div>
<footer></footer>

“100vh”是屏幕的全高