如何固定页面Header与Footer在顶部和底部且不遮挡内容？

问题情况 #

• 自定义footer-bottom类（设置position: fixed）：能固定在底部，但会遮挡页面内容
• 使用fixed-bottom类：不遮挡内容，但无法固定在页面底部

最优解决方案：Flex布局实现自适应底部 #

不需要依赖固定定位，通过Flex布局让页脚自动适配页面高度，内容不足时贴底，内容过长时随滚动到底部，完全不会遮挡内容。修改后的App.vue代码如下：

<script setup>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import ShowsSection from "./components/ShowsSection.vue";
</script>

<template>
  <div class="app-container">
    <Header class="header-top" />
    <ShowsSection class="content-area" />
    <Footer class="footer-bottom" />
  </div>
</template>

<style scoped>
.app-container {
  min-height: 100vh; /* 容器高度至少占满一屏 */
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.header-top {
  width: 100%;
}

.content-area {
  flex-grow: 1; /* 让内容区域自动填充剩余空间 */
}

.footer-bottom {
  width: 100%;
}
</style>

方案说明 #

• app-container设置min-height: 100vh确保容器至少占满视口高度，通过flex-direction: column让子元素垂直排列
• content-area的flex-grow: 1会让内容区域自动填充容器的剩余空间，把页脚挤到页面底部
• 完全不需要固定定位，避免了遮挡内容的问题，同时兼容PC和响应式场景

备选方案（固定定位场景） #

如果必须使用固定定位，需要给内容区域添加等于页脚高度的内边距，避免内容被遮挡：

1. 先确定页脚的高度（比如60px）
2. 在内容组件的样式中添加：

padding-bottom: 60px;

3. 保留页脚的position: fixed设置

这种方案需要硬编码页脚高度，灵活性不如Flex布局方案。

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