WordPress主题-我的页脚不停留在底部
[英]Wordpress theme - My footer doesn't stay at the bottom
问题描述
I'm having a huge issue with my custom Wordpress theme. 
我的自定义Wordpress主题存在很大的问题。 I've done a lot of research but it doesn't seem to get fixed. 我做了很多研究，但似乎还没有解决。 My footer does not stay in the bottom of the page, it even floats mid page in posts and statics pages. 我的页脚不停留在页面底部，甚至浮动在帖子和静态页面的中间页面。 I've tried everything out there but nothing seems to work. 我已经尝试了一切，但似乎没有任何效果。 I've also noticed that this is very common problem that can have many causes so I don't really know what's going on here. 我还注意到这是一个非常常见的问题，可能有很多原因，所以我真的不知道这是怎么回事。 I've checked and re-checked my code but I don't know where's the error. 我已经检查并重新检查了我的代码，但是我不知道错误在哪里。 Also, my footer has a huge blank space above it in the homepage, I've tried applying bottom and top margins but nothing works. 另外，我的页脚在首页上方有一个巨大的空白，我尝试应用上下边距，但没有任何效果。
I attached the code and some screenshots! 我附上了代码和一些屏幕截图！ Please help me, thank you very much! 请帮助我，非常感谢！
http://www.screencast.com/t/1uTrUy6t26z http://screencast.com/t/ASOXPY0G http://www.screencast.com/t/1uTrUy6t26z http://screencast.com/t/ASOXPY0G
body{ font-family: DINCond; margin: 0; position: relative; } .wrapper{ width: 100%; max-width: 1180px; padding:0; margin: 0 auto; } h1.banner{ background-image: url(images/nuevo-banner_01.jpg); background-repeat: no-repeat; text-indent: -10000px; height: 400px; width: 100%; } header nav{ float:right; } header nav h2{ text-indent: -10000px; height: 0; margin: 0; } header nav li{ float: left; list-style-type: none; margin: 10px; position:relative; top: -398px; left: -287px; } header nav li a{ text-decoration: none; color: #baa383; font-size: 18px; } #section-menu ul{ padding: 0; list-style-type: none; } #first-column{ position: relative; top: -23px; left: -50px; padding: 0; margin: 30px; } #first-column li{ margin: 0 0 20px 0; width: 100% } #second-column{ position: relative; right: -320px; top: -533px } #second-column li{ margin: 0 0 20px 0; width: 100%; } #third-column li{ position: relative; right: -730px; top: -1034px; padding: 0; margin: 0 -65px; width: 100%; } #banner-inferior{ position: relative; top: -1030px; padding: 0; width: 100%; } footer{ width:100%; height: 100px; position:absolute; bottom:0; left:0; display: block; } #redes{ float:left; position: relative; top: -35px; } #redes li{ display: inline-block; margin-left: 30px; position: relative; left: 50px; } h3.redes{ position: relative; top: -100px; } .comment-meta{ position: relative; } footer ul{ list-style-type: none !important; font-size: 25px; float: right; } footer li{ text-align: center !important; } #post-content{ float:left; width: 70%; clear: both; } #sidebar{ float:right; width: 26%; padding: 1%; background: #ffffff; } #sidebar li{ list-style-type: none; margin-left: -40px; position: relative; left: -20px; } .comment-list{ list-style-type: none; padding: 0; }
<html> <head> <title>Aprende A</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <header> <div class="wrapper"> <h1 class="banner">Aprende A</h1> <nav> <h2>Main Navigation</h2> <ul> <li><a href="">Inicio</a></li> <li><a href="">Productividad</a></li> <li><a href="">Finanzas Personales</a></li> <li><a href="">Salud</a></li> <li><a href="">Otros</a></li> <li><a href="">Contacto</a></li> </ul> </nav> </div> </header> <!--Start of homepage content--> <div class="wrapper"> <section id="section-menu"> <section id="first-column"> <ul> <li><a href=""><img src="images/images/baner-frase-inferior_04.jpg"></a></li> <li><a href=""><img src="images/newsletter.jpg"></a></li> </ul> </section> <section id="second-column"> <ul> <li><a href=""><img src="images/images/categorias_06.jpg"></a></li> <li><a href=""><img src="images/images/novedades_15.jpg"></a></li> </ul> </section> <section id="third-column"> <ul> <li><a href=""><img src="images/images/populares_09.jpg"></a></li> </ul> </section> <section id="banner-inferior"> <img src="images/images/populares_19.jpg"> </section> </section> </div> <!--End of homepage content--> <footer> <div class="wrapper"> <div id="redes"> <ul> <li>Síguenos en nuestras redes sociales</li> <li><a href=""><img src="images/instagram.png"></a></li> <li><a href=""><img src="images/facebook.png"></a>a></li> </ul> </div> <ul> <li><img src="images/library.png"></li> <li>Aprendiendo A</li> <li>© All rights reserved 2016</li> </ul> </div> </footer> </body> </html>
3 个解决方案
解决方案1
0 2017-01-03 02:45:03
我现在正在调查您的代码，但是facebook.png的锚标记存在问题，该标记显示
<a>a> //take a> away
解决方案2
0 2017-01-03 02:54:13
The CSS code of your footer is position:absolute. 页脚的CSS代码为position：absolute。 You should use position absolute only if you know what you are doing. 仅当您知道自己在做什么时，才应使用绝对位置。
Look at your code: 查看您的代码：
footer {
width:100%;
height: 100px;
position:absolute;
bottom:0;
left:0;
display: block;
}
You can read this as zero pixels away from bottom, zero pixels away from left, but in absolute position. 您可以将其读取为距离底部零像素，距离左侧零像素，但处于绝对位置。 As soon as you scroll the page the footer will go with the scroll this is what you in 99.999% of the cases do not want for a footer. 滚动页面后，页脚将随滚动一起移动，这是您在99.999％的情况下不希望使用页脚的情况。 It is also responsible for the blank space on your frontpage. 它还负责您首页上的空白。
Try instead: 请尝试：
footer {
position:fixed;
}
... if you want the footer to stick to the bottom but always be visible or try ...如果您希望页脚停留在底部但始终可见，或尝试
footer {
position:inherit;
}
... for the usual behaviour. ...对于通常的行为。
Read more about the position property here: http://www.w3schools.com/css/css_positioning.asp 在此处阅读有关position属性的更多信息： http : //www.w3schools.com/css/css_positioning.asp
By the way: Please recognize that a question like this is not very likely to be well answered as you posted a lot of unessecary code (read more on how to create a Minimal, Complete and Verifiable example ). 顺便说一句：请注意，由于您发布了许多未经验证的代码（请参阅有关如何创建最小，完整和可验证的示例的更多信息 ） ，因此这样的问题不太可能得到很好的回答。
解决方案3
-1 2017-01-03 16:14:24
Try changing the CSS of this: 尝试更改此CSS：
#redes{
float:left;
position: relative;
top: -35px;
}
to: 至：
#redes{
float:left;
position: relative;
top: -35px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.