文章/答案/技术大牛

发布

社区首页 >问答首页 >博客上的Hestia页脚

问博客上的Hestia页脚
EN

Stack Overflow用户

提问于 2021-09-16 10:07:34

回答 1查看 47关注 0票数 0

我目前正在为我的新公司建立一个网页，我正在使用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>

wordpress-theming

css

wordpress

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-16 14:59:31

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

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69206459

复制

相似问题

问博客上的Hestia页脚
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问博客上的Hestia页脚EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问博客上的Hestia页脚
EN