我有基本的编码经验。在我安装的 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”在页脚下面,所以这确实将空白减少到似乎不存在的程度,但是在更高的浏览器窗口上,空白再次出现。
最佳答案
页脚下方有空白,因为内容不足以将其推过高分辨率的显示器底部。
我建议使用 Sticky Footer 来处理这个。它允许正文的最小高度为浏览器的高度,无论页面中的内容有多少。
粘性页脚解决方案需要包含一些特定的 HTML 和一些基本的 CSS。这是一个 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">
围绕你的内容。
关于css - 如何删除 Wordpress 页脚下的空白区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25253425/