html - 当表格行数较多时，上面的div与页脚的div重叠

Question

我确实希望页脚 div 保留在页面底部，即使表格上没有行，它的工作发现，当内容较少时页脚位于底部，但当内容较长时，页脚保持不变在它的位置上，表格内容像幽灵一样穿过页脚。我不知道是什么术语，但看到我的 fiddle 并尝试向下滚动。

<style>
#footer{
    position : fixed;
    bottom : 0px;
    width : 100%;
}
</style>
<div>
    <table>
    <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
        <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
     <tr><td>Sample Text</td></tr>
</table>
</div>
<div><label id = "footer">Footer here</label></div>

fiddle here

Answer 1

可以这样解决:

#tblContent{
overflow: auto;
height: 742px;
}

<div id="tblContent">
 <table>
    <tr><td>Sample Text</td></tr><td>Sample Text</td></tr>
</table>
</div>

这里是 fiddle