通过 css 的 position: fixed 配合 bottom: 0，可实现页脚全局粘底；但需注意避免内容被遮挡，并统一应用于所有页面。
通过 css 的 position: fixed 配合 bottom: 0，可实现页脚全局粘底；但需注意避免内容被遮挡，并统一应用于所有页面。
要让页脚（footer）真正“粘”在视口底部（即无论页面内容多长或多么短，页脚始终显示在浏览器窗口最下方），关键在于使用 position: fixed —— 这是一种脱离文档流的定位方式，使元素相对于视口固定。
你当前的 CSS 中同时声明了 position: absolute 和后续的 position: fixed，而后者会覆盖前者（CSS 层叠规则），但存在两个隐患：
- 重复声明冗余：position: absolute 应彻底移除；
- 缺少 left: 0：仅设 bottom: 0 时，若未指定水平定位，fixed 元素可能因默认 left: auto 导致水平偏移（尤其在 Flex 容器中）；
- 内容遮挡风险：fixed 页脚会悬浮于内容之上，因此主体内容区域（如 <main> 或 <article>）必须预留足够底部内边距（padding-bottom）或外边距（margin-bottom），值至少等于页脚高度（本例为 4rem），否则文字可能被遮盖。
✅ 推荐修正后的 CSS 如下：
#footer-container {
display: flex; /* 确保子元素 flex 布局生效 */
align-items: center;
justify-content: space-between; /* 更合理地分隔邮箱与图标 */
width: 100%;
height: 4rem;
}
footer {
background-color: #1D3557;
color: #E63946;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 4rem;
/* 可选：提升层级，避免被其他元素遮挡 */
z-index: 1000;
}
footer address {
margin: 0;
padding: 0 1.5rem;
font-style: normal; /* 重置 address 默认斜体 */
}
#footer-image {
width: 40px;
height: 40px;
margin: 0 1.5rem;
}? HTML 结构建议微调（语义化 + 布局可控性）：
<footer id="footer-container">
<address>
<a class="__cf_email__"
data-cfemail="f09d809891828289c9c9c9c9b0979d91999cde939f9d"
href="/cdn-cgi/l/email-protection">[email protected]</a>
</address>
<a href="https://www.artfol.co/captain_sapphire" target="_blank">
<img src="https://github.com/CaptainSapphire/captainsapphire.github.io/blob/main/images/artfollogo.png?raw=true"
id="footer-image"
alt="Artfol Portfolio">
</a>
</footer>⚠️ 重要注意事项：
- 全局一致性：确保该 CSS 规则被所有页面共用（如通过外部样式表引入），而非仅作用于首页；检查你的构建流程或 <link> 标签是否在非首页遗漏加载。
- 响应式适配：在小屏幕下，justify-content: space-between 可能导致间距过大，可配合媒体查询调整为 flex-direction: column 或 align-items: center。
- 无障碍友好：为 <img> 添加 alt 属性；<address> 仅用于联系信息，语义正确。
✅ 最终效果：页脚将稳定吸附于视口底部，滚动时保持可见，且不干扰主体内容布局——这才是真正可靠的“Sticky Footer”。
