EJS循环渲染帖子页面Footer固定底部失效问题求助

你当前使用的position: absolute定位的footer，仅在页面内容高度小于视口高度时能正常显示在底部。当前页面因为循环渲染了多条帖子，内容总高度超过了视口高度，absolute定位的footer只会固定在初始视口的底部位置，不会跟随内容延伸到页面最底部，所以出现了悬浮在内容中间的异常。其他页面能正常显示是因为内容高度未超过视口高度，刚好符合absolute定位的表现。

根据你的实际需求选择对应方案即可：

场景1：footer常驻页面最底部（内容少的时候在视口底部，内容多的时候跟在所有内容末尾） #

使用flex弹性布局实现sticky footer，修改样式如下：

/* 新增全局基础样式 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 内容容器占满剩余高度 */
body > .container:first-of-type {
  flex: 1;
}

/* 修改footer样式，移除absolute定位 */
.footer {
  flex-shrink: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
}

场景2：footer固定在屏幕底部，不随页面滚动变化 #

将footer的定位改为fixed，同时给内容容器添加底部内边距避免内容被遮挡：

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
}

/* 新增内容容器底部内边距，数值大于等于footer高度即可 */
body > .container:first-of-type {
  padding-bottom: 70px;
}

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