Html css页脚未占用空间，内容未完全显示

我试图用css制作一个页脚，希望页脚是页面的底部，但是有些内容被拉伸到页脚内部， 下面是我的页脚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>

#页脚{
位置：固定；
底部：0；
宽度：100%；
}
版权所有©2016，Chaatz

您可以使用页脚元素的高度作为内容底部的填充，并对页脚元素顶部的边距中的相同值求反

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

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

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

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

页面内容
页脚内容
.包装纸{
身高：100%；
填充底部：150px；
}
.页脚{
高度：150像素；
利润上限：-150px；
}

您能解释一下吗？怎么了？也许我认为底部是：0；使div没有高度，因此页面中的内容隐藏在divI中。我在#页脚添加了left:0，在这里一切看起来都正常：