为何部分页面footer显示正常，部分页面存在异常？

我的footer在部分页面显示位置正常，但其他页面存在上下空白问题。试过Stack Overflow上的相关方案，但因为场景不同没效果。甚至在Info标签下拉展开时，另一页面也会出现同样的footer空白问题。

以下是我使用的代码：

<footer class = "site-footer">
    <div class = "phs-purple-container">
   <div class = "container-inner-contents" id = "further-links-section">
    <!-- links to other profiling products -->
        <div class="col-sm-3">
        <img padding: 10px 10px; height="150px" src="www/bftb_logo_v8_bare.png">
        </div>
        <div class="col-sm-3">
        <h4 style = "color:#d2cfeb" >Links</h4>
        <ul>
        <li><a style = "color:#d2cfeb" href="http:/bftb">test/bftb</a></li>
        <li><a style = "color:#d2cfeb" href="https://test.com/groups/430852910696122/">Workplace Group</a></li>
        <li><a style = "color:#d2cfeb" href="https://testics-for-the-Bench.aspx">Tutorial Recordings</a></li>
        </ul>
        </div>
        <div class="col-sm-3">
        <h4 style = "color:#d2cfeb" >About us</h4>
        <p style = "color:#d2cfeb">The Bioinformatics for the Bench landing page was built by Gab under supervision of And and Jo. Please contact us with suggestions </p>
        </div>
        <div class="col-sm-3">
        <h4 style = "color:#d2cfeb">Support</h4>
        <ul>
        <li><a style = "color:#d2cfeb" href="mailto:test.com">Contact Gab</a></li>
        <li><a style = "color:#d2cfeb" href="mailto:test.com">Contact And</a></li>
        <li><a style = "color:#d2cfeb" href="mailto:test.com">Contact Jo</a></li>
        </ul>
        </div>
        </div>
        </div>
</footer>

可能的原因与修复方案 #

1. 定位规则缺失导致布局偏移 #

如果页面内容未撑满视口，或动态内容（比如Info标签下拉）改变页面高度，footer会因没有明确定位规则出现空白。给footer添加基础定位样式：

.site-footer {
    position: relative;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

若需要footer始终固定在底部，改用position: fixed，同时给页面主内容容器添加padding-bottom（值等于footer高度），避免内容被遮挡。

2. 网格容器的边距冲突 #

你使用了col-sm-3这类Bootstrap网格类，父容器phs-purple-container或container-inner-contents可能自带上下内边距/外边距，导致footer内部出现空白。重置相关容器的边距：

.phs-purple-container, .container-inner-contents {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

另外，img标签的padding写法错误，需移到style属性内：

<img style="padding: 10px 10px; height:150px" src="www/bftb_logo_v8_bare.png">

3. 动态内容触发的页面重绘问题 #

Info标签下拉时页面高度变化，可能导致footer布局未适配。给主内容容器设置最小高度，确保撑满视口：

.main-content {
    min-height: calc(100vh - 200px); /* 替换200px为你的footer实际高度 */
}

4. 全局样式冲突 #

部分页面可能有优先级更高的全局样式覆盖footer规则，比如body/html的margin-bottom。用浏览器开发者工具（F12）检查footer元素的盒模型，查看是否有异常的边距被应用，针对性覆盖即可。

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