Wordpress 主题 - 我的页脚不会停留在底部答案

【问题标题】：Wordpress theme - My footer doesn't stay at the bottomWordpress 主题 - 我的页脚不会停留在底部
【发布时间】：2017-05-17 01:39:53
【问题描述】：

我的自定义 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>

【问题讨论】：

您有机会分享您的网站吗？提供的代码在运行时会粘在底部。
您好埃利泽！这是网站aprendiendo-a.com 非常感谢您查看并尝试帮助我:)

标签： php html css wordpress web

【解决方案1】：

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

<a>a> //take a> away

【讨论】：

我认为您的 css 语法不正确，我将创建一个页脚，您可以稍后对其进行操作。
你好安东尼！谢谢你的观察，但我认为这不会影响页脚:(我仍然遇到同样的问题。我会等待你创建的页脚，我相信它会有所帮助:) 谢谢非常喜欢！

【解决方案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;
    }

...对于通常的行为。

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

顺便说一句：由于您发布了很多不必要的代码，请注意此类问题不太可能得到很好的回答（阅读有关如何创建 a Minimal, Complete and Verifiable example 的更多信息）。

【讨论】：

你好 Blackbam！感谢您的出色解释和帮助。我试过了，但知道当我上下滚动时页脚会移动。我已经尝试了所有方法，但没有任何效果。
尝试位置：继承或位置：相对。这大概就是你想要的吧？并删除底部：0；并离开：0；它可能不是你想要的......