我有基本的编码经验。在我的Wordpress安装中, 我的某些页面的页脚下方有一个空白, 我要删除该空白。我尝试了几种解决方案, 但无济于事。该问题在chrome, Firefox, IE等上仍然存在。
我不确定原因, 但空白区域的大小会根据计算机/浏览器/分辨率而变化。
当我在Wordpress中工作时, 我可以访问自定义CSS和源主题文件, 但是, 我更希望使用自定义CSS解决此问题。
我想要一个页脚, 它固定在浏览器窗口的底部, 而其下方没有空格。
问:请向我提供代码/解决方案, 以消除我网站上页脚下方的空白(最好是自定义CSS方法)。
你可以在我的网站上找到空白示例。 (尝试在分辨率高于1280×
800的浏览器上查看)
我尝试过的解决方案:
- #footer {溢出:隐藏;}不起作用
- 放置html, body, parentDiv, childDiv, section, footer {height:100%; }在我的CSS中, 但是没有用
- #copyright {padding-bottom:20px; }” #copyright” 位于页脚下方, 因此确实将空白减少到了似乎不存在的程度, 但是在较高的浏览器窗口上, 空白再次出现。
我建议使用” 粘性页脚” 来处理。不管页面中的内容多么少, 它都可以使主体的最小高度等于浏览器的高度。
粘性页脚解决方案需要包含一些特定的HTML和一些基本的CSS。这是赖安·菲亚特(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” > 。
#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>
【如何在WordPress中删除页脚下方的空白()】演示:https://help.podio.com/hc/zh-cn
#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;
这帮助了我。希望你们也一样..
推荐阅读
- win7系统信息查看 Win7文件详细信息的查看与显示技巧
- 如何遍历WordPress分类
- 如何修复PHP错误(试图在WordPress模板中获取非对象的属性())
- 如何将短代码嵌入旋转滑块按钮
- 如何在没有插件的自定义WordPress主题中添加带有图标的搜索框
- 转换响应式WordPress ul菜单以选择无JS小屏幕
- WordPress主题在自定义和实时模式下看起来有所不同
- 登录重定向后的woocommerce
- Redux WP框架。一个简单的工作代码示例()