使用EJS搭建博客时CSS仅生效于Header，Footer无样式问题求助

问题分析 #

你的Footer样式不生效主要有三个原因：

• CSS文件路径错误：header.ejs里自定义CSS的引用路径有误，导致自定义样式未正确加载，Header生效的是Bootstrap的CDN样式，而非你的styles.css
• HTML标签不匹配：footer.ejs里多了一个多余的闭合标签，导致DOM结构异常，影响浏览器渲染
• Footer定位依赖缺失：.footer使用绝对定位，但未给父元素设置相对定位，导致定位逻辑异常

修复步骤 #

1. 修正CSS引用路径 #

修改header.ejs中的CSS引用路径，因为Express将public设为静态资源根目录，无需在路径中重复public：

<link rel="stylesheet" href="/css/styles.css">

2. 修复HTML标签结构 #

删除footer.ejs中多余的闭合标签，保证DOM结构匹配：

</div>
<div class="footer-padding"></div>
<div class="footer">
  <p>Made with ❤️ by The App Brewery</p>
</div>
</body>
</html>

3. 补充定位依赖样式 #

在styles.css中给<body>添加相对定位和最小高度，保证Footer的绝对定位正常生效：

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
}

验证 #

修改完成后重启服务器，访问页面即可看到Footer正常应用样式。

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