Question

我有基本的编码经验。在我的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;}＆＃34;＃copyright＆＃34;在页脚下，所以这确实将空白减少到看起来不存在的程度，但在较高的浏览器窗口中，空白区域重新出现。

Answer 1

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

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

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

代码如下：

<强> 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">即可。

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

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

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

这对我有帮助。希望你们也是...... ..

如何在Wordpress中删除页脚下的空白区域？

3 个答案: