CSS 如何在 Wordpress 中删除我的页脚下的空白区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25253425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the white space under my footer in Wordpress?
提问by RNDM
I have basic coding experience. In my Wordpress install, some of my pages have a blank white space under the footer that I would like to remove. I have tried several solutions but to no avail. The problem is persistent on chrome, Firefox, IE etc.
我有基本的编码经验。在我的 Wordpress 安装中，我的一些页面在页脚下有一个空白区域，我想删除它。我尝试了多种解决方案，但都无济于事。该问题在 chrome、Firefox、IE 等上仍然存在。
I'm not really sure of the cause, but the size of the white space changes depending on computer/browser/resolution.
我不太确定原因，但空白的大小会根据计算机/浏览器/分辨率而变化。
As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS.
当我在 Wordpress 中工作时，我可以访问自定义 CSS 和源主题文件，但是，我更愿意使用自定义 CSS 来解决这个问题。
I would like a footer that sticks to the bottom of the browser window with no whitespace below it.
我想要一个粘在浏览器窗口底部的页脚，下面没有空格。
Q. Please provide me with code/solution that will remove the white spaces below the footer on my website (preferably custom CSS method).
问：请向我提供代码/解决方案，以删除我网站上页脚下方的空白（最好是自定义 CSS 方法）。
You can find an example of the white space on my website here. (try viewing on a browser resolution higher than 1280x800)
您可以在我的网站上找到空白区域的示例。（尝试在高于 1280x800 的浏览器分辨率上查看）
Solutions i've tried:
我尝试过的解决方案：
#footer {overflow: hidden;}didn't workPutting
html, body, parentDiv, childDiv, section, footer { height : 100%; }in my css but that didn't work#copyright { padding-bottom: 20px;}"#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
#footer {overflow: hidden;}没用把
html, body, parentDiv, childDiv, section, footer { height : 100%; }在我的CSS，但没有奏效#copyright { padding-bottom: 20px;}“#copyright”位于页脚下方，因此这确实将空白减少到似乎不存在的程度，但是在较高的浏览器窗口中，空白又出现了。
回答by Timmah
You have whitespace under the footer because the content is not sufficient to push it past the bottom of the monitor at higher resolutions.
页脚下有空白，因为内容不足以以更高分辨率将其推过显示器底部。
I'd recommend using the Sticky Footerto handle this. It allows the minimum height of the body to be that of the browser, regardless of how little content is in the page.
我建议使用粘性页脚来处理这个问题。它允许正文的最小高度为浏览器的高度，无论页面中的内容有多少。
The sticky footer solution requires some specific HTML to be included, and some basic CSS. Here's a Fiddleof Ryan Fiat's sticky footer in action using the code from his example.
粘性页脚解决方案需要包含一些特定的 HTML 和一些基本的 CSS。这是Ryan Fiat使用他示例中的代码实际操作的粘性页脚的小提琴。
The code goes like this:
代码是这样的：
HTML:
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:
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;
}
Looking at your markup, you can use your existing div class="clear"></div>as your .pushdiv, then you only need to add the div class="wrapper">around your content.
查看您的标记，您可以使用您现有的div class="clear"></div>作为您的.pushdiv，然后您只需要div class="wrapper">在您的内容周围添加。
回答by wladan
Try something like this
尝试这样的事情
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>回答by Neal Bikram Thapa
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;
replace this code with this one,
用这个替换这个代码，
.footer-top-content .widget_links ul li a {
border-bottom: 1px #4C4C4C solid;
background: #333;
color:#999 !important;
overflow: hidden;
this helped mine. hope for you too guys..
这对我有帮助。希望你们也一样..
