Peter Hon Peter Hon - 1 month ago 4
CSS Question

css footer not occupy the space and content not showed completely

I am trying to make a footer by css and want the footer to be the bottom of page, however, some content are stretch to inside the footer,
the following are my footer css

#footer {
position: fixed;
bottom: 0;
width: 100%;
}

<div id="footer" style="background-color:#0099CC">
<center>
<table style="width:100%">
<tr>
<td valign="top">Copyright © 2016, Chaatz</td>
<td align="right" style="white-space:pre"><a href="https://legal.html">Terms and Conditions</a>
<a href="https://privacy.html">Privacy Notice</a></td>
</tr>
</table>
</center>
<br>
<br>
</div>

Answer

You can use the height of the footer element as a padding-bottom of the content and negate the same value in margin-top of the footer element.

<div class="wrapper">
    page content
</div>

<div class="footer">
    footer content
</div>

.wrapper{
    height:100%;
    padding-bottom:150px;
}

.footer{
    height:150px;
    margin-top:-150px;
}
Comments