使用视口高度媒体查询修复页脚定位问题

你的核心需求是让页脚在内容不足时固定在屏幕底部，内容足够时随页面滚动，且无需手动切换CSS。之前的思路存在两个关键问题：

1. 媒体查询属性错误：你使用了min-width: 100vh，但需要检测的是页面高度而非宽度，正确属性应为min-height
2. 固定定位逻辑冲突：position: fixed会让元素脱离文档流，无论内容多少都会固定在底部，和你“内容多时随滚动”的需求矛盾

推荐用Flex布局实现自适应底部页脚，无需媒体查询即可自动适配两种场景：

实现步骤 #

1. 重置默认边距，避免干扰布局
2. 将页面根容器（直接用body即可）设为垂直方向的Flex容器，确保至少占满屏幕高度
3. 让主内容区自动填充剩余空间，页脚会被自然“推”到底部

完整代码示例 #

/* 清除默认样式，消除边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 保证容器至少占满屏幕高度 */
}

/* 主内容区自动填充剩余空间 */
main {
  flex: 1;
}

/* 保留你的页脚基础样式，移除固定定位 */
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  /* 可选：添加背景色和内边距增强视觉区分 */
  background-color: #f0f0f0;
  padding: 1.2rem 0;
}

原理说明 #

• Flex容器的flex-direction: column让子元素垂直排列
• main的flex: 1属性会让它占据容器中除header和footer外的所有剩余空间：
  • 当内容不足时，main会被拉伸至填满屏幕剩余高度，页脚固定在底部
  • 当内容足够多时，main被内容撑开，容器高度超过屏幕高度，页脚随页面滚动到内容下方

这个方案完全不需要手动修改CSS，自动适配两种场景，也不会出现页脚覆盖内容的问题。

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