CODEWITHSUNDEEP
htmlcss
want_to_be_calm
want_to_be_calm

Reputation: 1627

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>

Upvotes: 1

Views: 80

Answers (1)

Raphael Denys
Raphael Denys

Reputation: 24

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;
}

Upvotes: 1

Related Questions