如何在 Wordpress 中删除页脚下的空白？答案

【问题标题】：How to remove the white space under my footer in Wordpress?如何在 Wordpress 中删除页脚下的空白？
【发布时间】：2014-10-04 21:07:55
【问题描述】：

我有基本的编码经验。在我的 Wordpress 安装中，我的一些页面在页脚下有一个空白区域，我想删除它。我尝试了几种解决方案，但无济于事。该问题在 chrome、Firefox、IE 等上持续存在。

我不太确定原因，但空白的大小会根据计算机/浏览器/分辨率而变化。

当我在 Wordpress 中工作时，我可以访问自定义 CSS 和源主题文件，但是，我更愿意使用自定义 CSS 来解决这个问题。

我想要一个贴在浏览器窗口底部且下方没有空白的页脚。

问。请向我提供代码/解决方案，以删除我网站页脚下方的空格（最好是自定义 CSS 方法）。

您可以在我的website here 上找到空白的示例。（尝试在分辨率高于 1280x800 的浏览器上查看）

我尝试过的解决方案：

#footer {overflow: hidden;} 不起作用
将 html, body, parentDiv, childDiv, section, footer { height : 100%; } 放入我的 css 中，但这不起作用
#copyright { padding-bottom: 20px;}“#copyright”位于页脚下方，因此这确实将空白减少到看起来不存在的程度，但在较高的浏览器窗口上，空白再次出现。

【问题讨论】：

标签： css wordpress wordpress-theming editing removing-whitespace

【解决方案1】：

页脚下方有空白，因为内容不足以在更高分辨率下将其推过显示器底部。

我建议使用 Sticky Footer 来处理这个问题。它允许正文的最小高度为浏览器的高度，无论页面中的内容有多少。

粘性页脚解决方案需要包含一些特定的 HTML 和一些基本的 CSS。这是Ryan Fiat 的 Fiddle 的粘性页脚，使用他的示例中的代码。

代码如下：

HTML：

<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Footer content here</p>
    </div>
</body>

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
    background-color:#eaeaea;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
    border:solid 1px red;
}
.footer, .push {
    height: 155px; /* '.push' must be the same height as 'footer' */
}
.footer {
    border:solid 1px blue;
}

查看您的标记，您可以使用现有的div class="clear"></div> 作为您的.push div，然后您只需在您的内容周围添加div class="wrapper">。

【讨论】：

很好地描述了正在发生的事情，但我必须强调我没有代码经验，所以我不知道如何实现这一点。另外我只能访问 Wordpress 主题 PHP & CSS 文件...没有 HTML。
没关系，Wordpress 通过存储在各种 PHP 文件中来组装发送到浏览器的 HTML。如果您可以访问 PHP，则可以在其中更改 HTML :) 我会查看 Wordpress Codex，这对于了解去哪里非常有用
我可以访问所有的PHP。我了解 Codex 中的大部分链接——仍然不确定哪个 php 文件充当“索引”。你知道吗？
Wordpress 不是我的强项，但在您的主题文件夹下，会有一个名为“footer.php”（或类似文件）的文件，您可以在其中操作页脚代码。至于其余的，this post 可能是一个不错的起点。
帖子内容丰富，并找到了页脚，谢谢。 CSS 当前放置在自定义 CSS 中。我会将 HTML 放在页脚 PHP 中的什么位置。这是我的页脚jsfiddle.net/9wpbu69L

【解决方案2】：

试试这样的

  
html {
   height: 100%;
}

body {
  height: 100%;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
}

footer {
  flex-shrink: 0; 
 }


.futovac {
  flex: 1;
 }

<html>
<body>
<main></main>
<div class="futovac"></div>
<footer></footer>
</body>

</html>

演示：https://help.podio.com/hc/en-us

【讨论】：

【解决方案3】：

find you code on .footer you code will be like this,

.footer-top-content .widget_links ul li a {
  border-bottom: 1px #4C4C4C solid;
  background: #333;
  color:#999;

用这个替换这个代码，

.footer-top-content .widget_links ul li a {
  border-bottom: 1px #4C4C4C solid;
  background: #333;
  color:#999 !important;
  overflow: hidden;

这对我有帮助。希望你们也一样。。

【讨论】：