页脚区域Media Queries问题排查与解决请求

1. 检查媒体查询断点覆盖 #

1024×1366属于竖屏宽幅设备（视口宽度1024px），大概率是现有媒体查询的断点划分未覆盖该分辨率，导致错误应用了隐藏页脚的样式：

• 排查是否存在类似@media (max-width: 1023px)的规则，误将1024px宽度的设备归为小屏范围，设置了display: none、position: absolute偏移错误或overflow: hidden等属性。
• 调整断点范围，比如将小屏断点设为max-width: 767px，或单独针对该分辨率添加适配规则：

@media (width: 1024px) and (height: 1366px) {
  footer {
    display: block;
    position: relative;
    overflow: visible;
    margin-top: auto;
  }
}

2. 修正布局逻辑 #

如果页面采用flex/grid布局，检查容器高度设置是否合理：

• 若父容器（如body）设置了height: 100vh，在1024×1366竖屏中，100vh为1366px，若内容高度超过容器且设置overflow: hidden，页脚会被挤出可视区域。修改为：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

footer {
  margin-top: auto;
}

• 若页脚使用fixed/absolute定位，检查bottom值是否被媒体查询修改为负数，导致页脚移出屏幕。

3. 调整内容区域溢出设置 #

如果主内容区域设置了height: 100%且overflow: scroll，会挤占页脚空间。将内容区域改为flex: 1（flex布局下），让内容自动填充剩余空间，页脚固定在底部。

4. 确认视口配置 #

确保HTML的视口meta标签正确，避免页面缩放导致布局错乱：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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