使用sticky footer技巧时页脚单行文本不居中问题排查求助

问题根源 #

你的布局异常核心由以下几个错误导致：

• CSS类名拼写错误：你写的.footer, .page-wrape:after中page-wrape是笔误，正确类名是page-wrap，这个错误导致sticky footer方案的占位伪元素完全不生效，.page-wrap的负margin设置挤压了页脚的布局空间，最终出现第一行文本偏移的问题。
• 缺少根元素高度配置：仅给body设置了height: 100%，未给html根标签设置高度，导致.page-wrap的min-height: 100%无法按预期生效。
• HTML标签未闭合：存在不规范的标题标签<h>heading<h>、右侧侧边栏p标签未闭合的问题，可能引发浏览器渲染异常。

解决方案 #

1. 修正CSS类名拼写错误，将原代码：

.footer, .page-wrape:after {
  height: 142px;
}

修改为：

.footer, .page-wrap:after {
  height: 142px;
}

2. 补充html根标签的高度配置，在CSS的body样式前添加以下代码：

html {
  height: 100%;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

3. 修正所有HTML标签的闭合问题：
   • 将不规范的标题标签改为合法闭合标签，如<h1>heading</h1>
   • 将右侧侧边栏未闭合的p标签改为<p>side column contents</p></div>
4. 可选优化：如果修改后仍有偏移，可以给.footer类添加width: 100%属性，确保页脚始终占满视口宽度。

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