Angular+Bootstrap下Footer无法铺满页面且固定底部的求助

1. 调整Footer固定定位样式 #

修改.footer类的CSS，添加固定定位属性，确保它贴紧底部并铺满宽度：

.footer {
  background-color: #24262b;
  padding: 20px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box; /* 防止padding撑开宽度超出页面 */
}

2. 避免内容被Footer遮挡 #

固定定位的元素会脱离文档流，覆盖页面内容，需要给页面主内容容器添加底部内边距，值大于等于Footer的总高度（padding+内容高度）：

/* 假设你的主内容容器类为main-content，根据实际项目调整 */
.main-content {
  padding-bottom: 150px;
}

3. 修复响应式媒体查询错误 #

当前媒体查询的max-width使用百分比是错误的，需改为具体像素值，适配移动端：

/* 移动端适配，示例为768px断点 */
@media(max-width: 768px) {
  .footer-col {
    width: 100%;
    margin-bottom: 30px;
    padding: 0 15px; /* 添加左右内边距，避免内容贴边 */
  }
}

4. Bootstrap快捷方案（可选） #

因为你已安装Bootstrap，可直接使用框架内置的fixed-bottom类简化操作：

<footer class="footer fixed-bottom">
  <!-- 原有内容不变 -->
</footer>

同样需要给主内容添加底部内边距避免遮挡。

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