srcmini我有基本的编码经验。在我的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”位于页脚下方, 因此确实将空白减少到了似乎不存在的程度, 但是在较高的浏览器窗口上, 空白再次出现。
#1
页脚下有空白, 因为内容不足以高分辨率将其推过显示器的底部。
我建议使用”粘性页脚”来处理。不管页面中的内容多么少, 它都可以使主体的最小高度等于浏览器的高度。
粘性页脚解决方案需要包含一些特定的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>演示：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;
这帮助了我。希望你们也一样..
评论前必须登录！
注册