新手常因滥用 `position: relative` 和超大负边距（如 `margin-top: -3500px`）导致页脚下方出现异常空白；根本解决方法是回归文档流，用现代布局方式（flexbox/grid）替代手动定位。
你遇到的“页脚下方巨大空白”，并非浏览器 Bug，而是典型的手动绝对定位 + 大量 position: relative 与夸张偏移值（如 right: -1930px、bottom: 3612px、margin-top: -3500px）共同导致的文档流断裂问题。
在你的代码中，所有门店信息区块（Sylvia Park、Te Rapa 等）均通过 position: relative 配合极大幅度的 right/bottom 值强行“拖拽”到页面指定位置。这看似实现了视觉排版，实则让这些元素仍在原始文档流中占据大量不可见空间——它们被“推”到了视口之外，但其原始占位高度仍保留在
内部，最终将页脚远远“撑开”，造成底部巨幅空白。✅ 正确解法：放弃手动坐标，拥抱自然流与现代布局
1. 移除所有破坏性定位声明
首先，在开发阶段快速验证问题根源，可在
* {
position: static !important;
margin: 0 !important;
padding: 0 !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
}刷新页面后，你会看到所有内容回归顶部自然堆叠——这证明问题确实源于定位滥用。
立即学习“前端免费学习笔记（深入）”；
2. 用语义化结构 + Flexbox 重构联系页
将重复的
等区块改为语义化列表，并用 Flexbox 实现多列响应式布局：
Our Stores
- @@##@@
Auckland — Sylvia Park
LOCATION
Shop 246, Sylvia Park
286 Mount Wellington Highway
Mount Wellington
Auckland 1060CONTACT US
Phone: 09 218 6511
Email: info@popstop.co.nzOUR HOURS
Mon–Fri: 9:00AM–7:00PM / Sat: 9:00AM–7:00PM / Sun: 9:00AM–9:00PM
对应 CSS（简洁、可维护、响应式）：
.stores {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
.store-list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
list-style: none;
padding: 0;
}
.store-item {
flex: 1 1 300px; /* 最小宽300px，自动伸缩 */
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.store-item img {
width: 100%;
height: auto;
display: block;
}
.store-details {
padding: 1.25rem;
}
.store-details h4 {
font-size: 0.9rem;
margin: 0.75rem 0 0.5rem;
color: #850000;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.store-details p {
margin: 0;
line-height: 1.5;
}3. 固定页脚（Sticky Footer）推荐方案
确保页脚始终贴底（即使内容少），推荐使用 Flexbox 布局容器：
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
background-color: #d9d9d9;
font-family: "Source Sans Pro", sans-serif;
}
main {
flex: 1; /* 占满剩余空间 */
}
.footer {
background-color: #850000;
color: white;
padding: 1.5rem 1rem;
text-align: center;
}并在 HTML 中包裹主体内容：
⚠️ 关键注意事项
- 永远避免 margin-top: -3500px 类型的“魔法数字”：这是紧急补丁，不是解决方案；
- 慎用 position: relative：仅当需要为子元素（position: absolute）创建定位上下文时才设父级为 relative；
- 不要用 overflow: hidden 掩盖布局问题：它会裁剪真实内容，阻碍可访问性与调试；
- 字体加载需修正：你引用了 Google Fonts，但 的 type="css" 是错误写法，应为 type="text/css" 或直接省略；
-
语义化优先：用
- 替代无意义的
