Vue组件化Footer固定定位遮挡页面内容，CSS如何调整？

当前你的Footer使用position: fixed，这个定位会让元素脱离正常文档流、悬浮在页面上层，所以页面底部的内容会被它盖住。下面是几种可行的修改方案：

方案一：保留固定定位，给主内容加底部外边距 #

如果想让Footer始终固定在视窗底部，给页面的主内容容器（比如包裹页面主体的<main>或根容器）设置margin-bottom，数值等于Footer的高度。假设Footer高度是60px：

/* 主内容容器的样式 */
.main-content {
  margin-bottom: 60px; /* 数值和Footer高度一致 */
}

如果Footer高度不固定，可以用CSS变量或者JS动态计算高度，但静态场景下直接写死高度最省心。

方案二：修改Footer的定位方式 #

如果不需要Footer一直固定在视窗底部，只是希望它在页面内容的最下方，把position: fixed改成position: relative，同时移除left: 0、bottom: 0这些固定定位的属性：

.footer {
  position: relative; /* 替换原来的fixed */
  width: 100%;
  background-color:#EB9BC3;
  color: white;
  text-align: center;
  /* 可以加padding来控制Footer的高度 */
  padding: 1rem 0;
}

这种方式下，Footer会跟着文档流走，页面内容自然不会被遮挡，但页面内容较短时，Footer会出现在页面中间，而不是视窗底部。

方案三：实现"粘性底部"（推荐） #

如果想要内容短的时候Footer贴视窗底部，内容长的时候跟着内容走的效果，用Flexbox布局最方便：

给页面最外层的容器（比如Vue的#app容器）设置：

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 主内容容器 */
.main-content {
  flex: 1; /* 让主内容占满剩余空间 */
}

.footer {
  width: 100%;
  background-color:#EB9BC3;
  color: white;
  text-align: center;
  padding: 1rem 0;
}

这种方案不需要固定Footer高度，兼容性也很好，是目前比较推荐的现代布局方式。

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