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的锚标签存在问题

ParentClass#actionPerformed(ActionEvent)

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;
    }

...通常的行为。

在此处详细了解位置属性：http://www.w3schools.com/css/css_positioning.asp

顺便说一句：请注意这样的问题不太可能得到很好的回答，因为你发布了很多非遗漏代码（详细了解如何创建a Minimal, Complete and Verifiable example）。

Answer 3

尝试更改此内容的CSS：

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

为：

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

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

3 个答案: