页面Footer无法固定于底部，如何实现始终固定？

核心问题排查与修复 #

你的代码已使用position: fixed，但部分细节可能导致效果不符合预期，调整方式如下：

1. 移除body冗余的margin-bottom #

你给body设置的margin-bottom: 100px属于无效设置——固定定位的footer不受文档流影响，这一属性只会让页面底部额外留白，直接移除即可：

body {
  background-color: #b4b9d1;
  background-image: url(Photos/New.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* 移除该行 */
  /* margin-bottom: 100px; */
  min-height: 100vh;
}

2. 添加z-index避免footer被遮挡 #

若页面内有其他带定位的元素（如设置了position: relative的header），可能会覆盖footer。给footer添加足够高的z-index即可解决：

.myfooter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #000000;
  color: #ffffff;
  display: block;
  justify-content: center;
  align-items: center;
  /* 添加该行，数值可根据页面元素调整 */
  z-index: 999;
}

3. 修正footer的布局属性（可选优化） #

你给footer设置了display: block，但justify-content和align-items仅在display: flex时生效。如果需要让内部文字垂直居中，可将display: block改为display: flex：

.myfooter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #000000;
  color: #ffffff;
  /* 替换为flex布局 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

修改后，footer内的文字会同时实现水平和垂直居中，效果更完善。

最终完整代码 #

CSS 代码 #

body {
  background-color: #b4b9d1;
  background-image: url(Photos/New.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 100vh;
}

.myfooter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #000000;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.myfooter p {
  font-size: 24px;
  color: rgb(198, 198, 198);
}

HTML 代码 #

<header>
  <img src="Photos/hty.png" style="height: 54.5px; width: 88.75px" alt="my Logo">
  <div class="navigation">
    <div class="navigation-items">
      <a href="#">HOME</a>
      <a href="#">PORTFOLIO</a>
      <a href="#">ABOUT</a>
      <a href="#">CONTACT</a>
    </div>
  </div>
</header>
<main>
</main>
<div class="myfooter">
  <p>this is the footer</p>
</div>

内容的提问来源于stack exchange，提问作者Michal Cohen