博客上的赫斯提亚页脚

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

您可以使用 Sticky Footer 结构。如果页脚的高度有限，则此方法有效：

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>