如何将Hestia主题博客文章页的页脚固定吸附在页面底部

提问内容 #

我目前正在为新公司搭建网页，使用的是Hestia主题，整体很喜欢页脚的外观，但博客文章中的页脚效果不符合预期。我希望它能固定在页面底部，尝试过修改CSS但没有生效，当前效果如下：

我想将它向下移动，避免露出一行背景图片。如果部分表述不够清晰请见谅，我的母语不是英语。
页脚代码如下：

<div class="footer-wrapper">
                        <footer class="footer footer-black footer-big">
                        <div class="container">
                                
        <div class="content">
            <div class="row">
                <div class="col-md-4"><div id="text-7" class="widget widget_text">          <div class="textwidget">        <div data-elementor-type="wp-post" data-elementor-id="249" class="elementor elementor-249" data-elementor-settings="[]">
                            <div class="elementor-section-wrap">
                            <section class="elementor-section elementor-top-section elementor-element elementor-element-614b301 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="614b301" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-fd11883" data-id="fd11883" data-element_type="column">
            <div class="elementor-widget-wrap elementor-element-populated">
                                <div class="elementor-element elementor-element-fcc6579 elementor-view-default elementor-widget elementor-widget-icon" data-id="fcc6579" data-element_type="widget" data-widget_type="icon.default">
                <div class="elementor-widget-container">
                    <div class="elementor-icon-wrapper">
            <a class="elementor-icon" href="https://www.instagram.com/autoimporter.es/">
            <i aria-hidden="true" class="fab fa-instagram"></i>         </a>
        </div>
                </div>
                </div>
                    </div>
        </div>
                <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-3a99e74" data-id="3a99e74" data-element_type="column">
            <div class="elementor-widget-wrap elementor-element-populated">
                                <div class="elementor-element elementor-element-0fb0b06 elementor-view-default elementor-widget elementor-widget-icon" data-id="0fb0b06" data-element_type="widget" data-widget_type="icon.default">
                <div class="elementor-widget-container">
                    <div class="elementor-icon-wrapper">
            <a class="elementor-icon" href="https://twitter.com/auto_importer">
            <i aria-hidden="true" class="fab fa-twitter-square"></i>            </a>
        </div>
                </div>
                </div>
                    </div>
        </div>
                <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-167065a" data-id="167065a" data-element_type="column">
            <div class="elementor-widget-wrap elementor-element-populated">
                                <div class="elementor-element elementor-element-8973f49 elementor-view-default elementor-widget elementor-widget-icon" data-id="8973f49" data-element_type="widget" data-widget_type="icon.default">
                <div class="elementor-widget-container">
                    <div class="elementor-icon-wrapper">
            <a class="elementor-icon" href="https://www.facebook.com/AutoImporter-707256520097820">
            <i aria-hidden="true" class="fab fa-facebook-square"></i>           </a>
        </div>
                </div>
                </div>
                    </div>
        </div>
                            </div>
        </section>
                        </div>
                    </div>
        
</div>
        </div></div><div class="col-md-4"><div id="media_image-7" class="widget widget_media_image"><a href="https://autoimporter.webbing.online/"><img width="300" height="81" src="https://autoimporter.webbing.online/wp-content/uploads/2021/09/logo_invertido-300x81.png" class="image wp-image-600  attachment-medium size-medium" alt="" loading="lazy" style="max-width: 100%; height: auto;" srcset="https://autoimporter.webbing.online/wp-content/uploads/2021/09/logo_invertido-300x81.png 300w, https://autoimporter.webbing.online/wp-content/uploads/2021/09/logo_invertido-1024x275.png 1024w, https://autoimporter.webbing.online/wp-content/uploads/2021/09/logo_invertido-768x206.png 768w, https://autoimporter.webbing.online/wp-content/uploads/2021/09/logo_invertido-1536x412.png 1536w, https://autoimporter.webbing.online/wp-content/uploads/2021/09/logo_invertido-2048x550.png 2048w, https://autoimporter.webbing.online/wp-content/uploads/2021/09/logo_invertido-600x161.png 600w" sizes="(max-width: 300px) 100vw, 300px"></a></div></div><div class="col-md-4"><div id="text-8" class="widget widget_text">           <div class="textwidget">        <div data-elementor-type="wp-post" data-elementor-id="275" class="elementor elementor-275" data-elementor-settings="[]">
                            <div class="elementor-section-wrap">
                            <section class="elementor-section elementor-top-section elementor-element elementor-element-f1c05fe elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="f1c05fe" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-409d5ef" data-id="409d5ef" data-element_type="column">
            <div class="elementor-widget-wrap elementor-element-populated">
                                <div class="elementor-element elementor-element-f838ba9 elementor-widget elementor-widget-heading" data-id="f838ba9" data-element_type="widget" data-widget_type="heading.default">
                <div class="elementor-widget-container">
            <h3 class="elementor-heading-title elementor-size-default">Legal</h3>       </div>
                </div>
                <div class="elementor-element elementor-element-91a9805 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="91a9805" data-element_type="widget" data-widget_type="divider.default">
                <div class="elementor-widget-container">
                    <div class="elementor-divider">
            <span class="elementor-divider-separator">
                        </span>
        </div>
                </div>
                </div>
                <div class="elementor-element elementor-element-4ecdee4 elementor-widget elementor-widget-text-editor" data-id="4ecdee4" data-element_type="widget" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                            <a href="https://autoimporter.webbing.online/aviso-legal/">Aviso Legal</a>
<br>
<a href="https://autoimporter.webbing.online/politica-de-privacidad/">Política de Privacidad</a>
<br>
<a href="https://autoimporter.webbing.online/politica-de-cookies/">Política de Cookies</a>                      </div>
                </div>
                    </div>
        </div>
                            </div>
        </section>
                        </div>
                    </div>
        
</div>
        </div></div>            </div>
        </div>
        <hr>
                                        <div class="hestia-bottom-footer-content"><ul id="menu-menu-1" class="footer-menu pull-left"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-132"><a href="https://autoimporter.webbing.online/"><i class="obfx-menu-icon dashicons dashicons-admin-users"></i>Inicio</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-310"><a href="https://autoimporter.webbing.online/pide-tu-coche/"><i class="obfx-menu-icon fa fa-car"></i>Pide tu coche</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-55"><a href="https://autoimporter.webbing.online/blog/"><i class="obfx-menu-icon dashicons dashicons-welcome-write-blog"></i>Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="https://autoimporter.webbing.online/contacto/"><i class="obfx-menu-icon dashicons dashicons-email-alt"></i>Contacto</a></li>
</ul>       </div>          </div>
                    </footer>
                </div>

解决方案 #

将以下CSS代码添加到WordPress后台「外观」-「自定义」-「额外CSS」输入框中，保存即可生效，不会被主题更新覆盖。

全站点通用粘性页脚方案 #

通过flex布局实现页脚始终固定在页面底部，无论页面内容长度多少都不会露出背景：

html, body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}
/* 主内容区域自动拉伸占满剩余空间 */
#primary {
  flex: 1 0 auto;
}
/* 页脚固定在底部 */
.footer-wrapper {
  flex-shrink: 0;
}

仅博客文章页生效方案 #

如果仅需要修复博客单页的问题，不会影响其他页面的原有样式：

.single-post .footer-wrapper {
  width: 100%;
  position: relative;
  bottom: 0;
  margin-top: 30px !important; /* 可自行调整数值控制和上方内容的间距 */
}
/* 如果仍有背景露出，可添加和页脚同色的背景遮盖多余区域 */
.single-post {
  background-color: #000; /* 替换为你页脚实际使用的背景色 */
}

如果修改后未生效，清理浏览器缓存和站点缓存后再查看即可。

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