Html 当表中有许多行时，上面的div与页脚div重叠

我确实希望页脚div保持在页面的底部，即使表上没有行，它的工作查找，当内容较少时页脚位于底部，但当有长内容时，页脚保持在其位置，并且表内容像幽灵一样通过页脚。我不知道什么术语，但看到我的小提琴，试着向下滚动

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

#页脚{
位置：固定；
底部：0px；
宽度：100%；
}
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
示例文本
页脚在这里

---

您可以这样解决：

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

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

#待定内容{
溢出：自动；
高度：742px；
}
示例文本示例文本

---

下面是

尝试为表的父div指定高度。下面是一个jquery脚本，用于动态计算高度

HTML

CSS

---

您可以将页脚粘贴到内容的底部。例如，当有很多内容时，这里有一把小提琴：。而且，当只有几行时，这里有一把小提琴：

HTML:

CSS:

---

您想要的是，如果您能负担得起使用

框大小调整

（并非所有浏览器都支持）请告诉我，我将为您提供更好的解决方案

只需在页脚类中添加背景色：#ffffff，如下所示：

#footer{
    position : fixed;
    bottom : 0px;
    width : 100%;
    background-color: #ffffff;
}

---

我已经在fiddler上测试过了。

没有任何变化，上面的div仍然通过小提琴的页脚。如果内容大小增加，页脚会下降，你想这样做吗？@Niang在这种情况下，这将是不可行的解决方案，因为你的网页也会有最大的大小，所以你需要制作固定高度或最大高度的表格，否则你会允许多大的尺寸进入你的表格？嗯，谢谢，不是我想要的，而是谢谢。也许我会改变我想要的。嗨，@DRD这是所有浏览器都支持的吗？它适用于所有现代浏览器和大多数浏览器<代码>框大小调整受IE8及更高版本的支持，在Mozilla中，我认为您仍然必须使用前缀

-moz

。在以前的浏览器中，您可以使用额外的标记，而不是使用框大小：。

    var gutterspace = 20; //Space between the container and the footer
    var cal_height = $(window).height() - ($('#footer').height() + gutterspace);
    $('.container').css('height',cal_height);

.container{ overflow:auto; }

see fiddles

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    margin: 0 auto -40px; 
    padding-bottom: 40px;
}

footer {
    height: 40px;
    background-color: teal;
}

#footer{
    position : fixed;
    bottom : 0px;
    width : 100%;
    background-color: #ffffff;
}