[英]I can't get any of the sticky footer tutorials I've read to work on my wordpress theme
我一直在阅读的粘性页脚教程一定会让我有所遗漏,因为它们都与我的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;
}
是否有实现这一目标的可靠方法?
您可以将bottom:0;
的位置更改为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%
}
我通常通过在body标签之后但在页脚div之前的所有内容周围添加div来完成此操作。 然后将div设置为min-height:100%;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.