Wordpress theme - My footer doesn't stay at the bottom
Question
I'm having a huge issue with my custom Wordpress theme. 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
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 answers
solution1
0 2017-01-03 02:45:03
我现在正在调查您的代码，但是facebook.png的锚标记存在问题，该标记显示
<a>a> //take a> away
solution2
0 2017-01-03 02:54:13
The CSS code of your footer is 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. 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
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 ).
solution3
-1 2017-01-03 16:14:24
Try changing the CSS of this:
#redes{
float:left;
position: relative;
top: -35px;
}
to:
#redes{
float:left;
position: relative;
top: -35px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.