Peter Hon Peter Hon - 1 year ago 74
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">
<table style="width:100%">
<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>

Answer Source

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 class="footer">
    footer content


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download