我无法获得我读过的任何粘性页脚教程来处理我的wordpress主题

时间:2016-01-18 23:22:18

标签: html css wordpress

我一定会错过一些我读过的粘性页脚教程,因为它们都没有对我的wordpress网站/主题产生丝毫的影响。

目前,内容将我的页脚向下推,但它从不位于页面的底部,除非有什么东西可以将它推到那里。

我的css是:

body{ 
margin: 0; 
min-width: 100%;    
height: auto !important;
}

.header {
width: 75%;
max-width: 75%;
height: 40px;
padding-top: 32px;
padding-bottom:32px;
margin-right: auto;
margin-left: auto;  
}

.content {
position:relative;
width: 100%;
max-width:100%;
height: auto;
}

.footer {  
border-top-style: solid;
border-top-width: 1.5px; 
border-top-color: #e1e1e1;
background-color: #ffffff;
height: 25px;
width: 75%;
max-width:75%;
padding-top: 30px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
}

有没有确定的方法来实现这一目标?

2 个答案:

答案 0 :(得分:1)

您可以使用absolute将页脚的位置更改为bottom:0;并进行调整

html {
position:relative;
min-height:100%;
}

.content {
position:relative;
width: 100%;
max-width:100%;
height: auto;
padding-bottom:50px; //to avoid content overlaping the footer
}

.footer {  
border-top-style: solid;
border-top-width: 1.5px; 
border-top-color: #e1e1e1;
background-color: #ffffff;
height: 25px;
width: 75%;
max-width:75%;
padding-top: 30px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
position:absolute;
bottom:0;
left:12,5%; // Since the footer width is 75%
}

答案 1 :(得分:1)

我通常通过在body标签之后但在页脚div之前添加div来实现此目的。然后将div设置为min-height:100%;