页脚出现在较小的屏幕中

Question

我是一个html页面，其中我显示了一个表格，其中包含数据库中的数据以及页面底部的页脚。

问题在于，页脚较小（大约小于760px）页脚，而不是在底部，向上，因此重叠并隐藏部分显示数据< /强>

无论屏幕大小如何，我都希望页脚始终位于页面底部。

我的代码片段如下所述。请求您提供解决方案。

修改1 ：codepen网址提供（静态）方案（请查看更小的屏幕尺寸）：http://codepen.io/abbor123/pen/YGwVXg

页脚元素：

<div class="footer">
    <div class="container">
        <p>Designed & Created by AB </p>
        <p><i class="fa fa-lg fa-creative-commons" aria-hidden="true"></i> Some Rights Reserved </p>
    </div>
</div>

CSS ：

.footer
{
    clear: both;
    position: relative;
    z-index: 10;
    height: 8em;
    margin-top: -5em;
    padding-top: 2.5em;
    background: #009933;
    text-align: center;
}

body
{
    background:url(image.png) no-repeat center center fixed;
    background-size: cover; 
    font-family: 'Exo 2', sans-serif;
    color: black;
}

@media (max-width: 770px)
{
    #table-display
    {
        font-family: 'Exo 2', serif;
        text-shadow: 4px 4px 4px #aaa;
        text-align: left;
        color: black;
        margin-top: 60px;
        border-collapse: collapse;
        width: 100%;
    }
}

Answer 1

要解决页脚问题，请从height: 60em;课程中删除.row。它位于CodePen的CSS第68行。 http://codepen.io/FluidOfInsanity/pen/gwvZLN?editors=1100 另外，您想要从top: 6px;中删除td:before吗？也许你的例子只是一个快速的模型，但它抛弃了我的例子。