WordPress主题-我的页脚不停留在底部

Question

我的自定义Wordpress主题存在很大的问题。 我做了很多研究，但似乎还没有解决。 我的页脚不停留在页面底部，甚至浮动在帖子和静态页面的中间页面。 我已经尝试了一切，但似乎没有任何效果。 我还注意到这是一个非常常见的问题，可能有很多原因，所以我真的不知道这是怎么回事。 我已经检查并重新检查了我的代码，但是我不知道错误在哪里。 另外，我的页脚在首页上方有一个巨大的空白，我尝试应用上下边距，但没有任何效果。

我附上了代码和一些屏幕截图！ 请帮助我，非常感谢！

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>&copy; All rights reserved 2016</li> </ul> </div> </footer> </body> </html>

Answer 1

我现在正在调查您的代码，但是facebook.png的锚标记存在问题，该标记显示

<a>a> //take a> away

Answer 2

页脚的CSS代码为position：absolute。 仅当您知道自己在做什么时，才应使用绝对位置。

查看您的代码：

footer {
    width:100%;
    height: 100px; 
    position:absolute; 
    bottom:0;
    left:0;
    display: block;
}

您可以将其读取为距离底部零像素，距离左侧零像素，但处于绝对位置。 滚动页面后，页脚将随滚动一起移动，这是您在99.999％的情况下不希望使用页脚的情况。 它还负责您首页上的空白。

请尝试：

footer {
   position:fixed;
}

...如果您希望页脚停留在底部但始终可见，或尝试

footer {
       position:inherit;
    }

...对于通常的行为。

在此处阅读有关position属性的更多信息： http : //www.w3schools.com/css/css_positioning.asp

顺便说一句：请注意，由于您发布了许多未经验证的代码（请参阅有关如何创建最小，完整和可验证的示例的更多信息），因此这样的问题不太可能得到很好的回答。

Answer 3

尝试更改此CSS：

#redes{
float:left;
position: relative;
top: -35px;
}

至：

#redes{
float:left;
position: relative;
top: -35px;
}

WordPress主题-我的页脚不停留在底部

问题描述

3 个解决方案

解决方案1
0 2017-01-03 02:45:03

解决方案2
0 2017-01-03 02:54:13

解决方案3
-1 2017-01-03 16:14:24

WordPress主题-我的页脚不停留在底部

问题描述

3 个解决方案

解决方案1 0 2017-01-03 02:45:03

解决方案2 0 2017-01-03 02:54:13

解决方案3 -1 2017-01-03 16:14:24

解决方案1
0 2017-01-03 02:45:03

解决方案2
0 2017-01-03 02:54:13

解决方案3
-1 2017-01-03 16:14:24