博客上的 Hestia 页脚

Question

我目前正在为我的新公司构建一个网页，我使用的是 Hestia 主题，总的来说我喜欢页脚的样子，但我不喜欢博客文章中的页脚。我希望它附在页面底部。我试过修改 CSS，但没有结果，现在是这样的： footer-now

我想让它向下移动，这样它就不会显示一行背景图片。对不起，如果文本的某些部分不清楚，我不是英语母语者。

来自页脚的代码：

<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>

Answer 1

您可以使用粘性页脚结构。如果页脚高度有限，此方法有效：

html, body {
  height: 100%;
  margin: 0;
}
.main {
  min-height: 100%;
}
.content {
  padding-bottom: 70px;
}
.footer {
  height: 70px;
  margin-top: -70px;
  background: #d5d5d5;
}

p {
  padding: 15px;
}

<body>
  <div class="main">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <footer class="footer"><p>Footer</p></footer>
</body>

博客上的 Hestia 页脚

Hestia footer on blog

css

wordpress

wordpress-theming