Question

我确实希望页脚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>

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

Answer 2

您可以将页脚粘贴到内容的底部。例如，当有很多内容时，这是一个小提琴：http://jsfiddle.net/uQ8s2/。并且，当行数很少时，这是一个小提琴：http://jsfiddle.net/w6JYp/。

HTML：

see fiddles

CSS：

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

Answer 3

尝试为表格的父div提供高度。下面是一个动态计算高度的jquery脚本。

HTML

    <div class="container">
        <table>
            <tr><td>Sample Text</td></tr>...
        </table>
    </div>

JS

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

CSS

.container{ overflow:auto; }

DEMO

Answer 4

如果您有能力使用box-sizing（并非所有浏览器都支持），那么您要找的是http://yui3.wordpress.com/2011/10/03/sticky-footer-with-css/让我知道我会为您提供更好的解决方案

Answer 5

只需在页脚类中添加background-color：#ffffff，如下所示：

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

我在小提琴手上测试了这个。

当有很多行表时，上面的div重叠了页脚div

5 个答案: