I must be missing something with the sticky footer tutorials I've been reading, because none of them make the slightest bit of difference to my wordpress site / theme.
At the moment, the content pushes my footer down, but it never sits at the bottom of the page unless there's something to push it there.
My css is:
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;
}
Is there a sure-shot way of achieving this?
You can change the position of your footer to absolute
with a bottom:0;
and adjust it
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%
}
I usually accomplish this by adding a div around all the content after the body tag but before the footer div. Then set that div to min-height: 100%;
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.