I know this is a common issue but I just can't work this out. No matter how many combinations of settings I try, the footer won't stay on the bottom of the page. It will just sit under whatever else is above it.
body {
margin: 0;
background-color: #ACFAB7;
}
# container {
margin: 0 auto;
padding: 40px;
}
#header {
z-index: 0;
height: 78px;
background-color: #2ecc71;
}
#footer {
z-index: 2;
height: 40px;
width: 100%;
padding: 0px;
position: relative;
background-color: #2ecc71;
/*display required to center text*/
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#image {
z-index: 1;
margin: 20px auto;
padding: 50px;
}
/*Centers text within the header*/
span {
display: table-cell;
vertical-align: middle;
}
You have a lot of problems. This solution is for:
Fixes
display: table
. width: 100%
. relative
to fixed
. #footer { z-index: 2; line-height: 40px; padding: 0px; position: fixed; background-color: #2ecc71; text-align: center; left: 0; right: 0; bottom: 0; }
<div id="footer">Copyrights.</div>
You can use position: fixed; bottom: 0
position: fixed; bottom: 0
;
#footer { z-index: 2; height: 40px; width: 100%; padding: 0px; background-color: #2ecc71; text-align: center; margin-left: auto; margin-right: auto; position:fixed; bottom:0; left: 0; }
<div> <footer id="footer">Footer</footer> </div>
position: fixed;
and bottom: 0;
should do the trick. Add width and height as neccessary.
.footer { position: fixed; bottom: 0; width: 100%; height: 30px; background-color: aquamarine; }
<div style="background-color: lightgrey;height: 800px"> Page content </div> <div class="footer"> this is the footer </div>
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.