页脚出现在较小的屏幕中

Question

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

问题在于，对于较小的屏幕（大约小于760像素），页脚而不是在底部，而是向上移动 ，从而重叠并隐藏了部分显示数据 。

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

我的代码段在下面提到。 要求您提供解决方案。

编辑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 ？ 也许您的示例只是一个快速的模型，但它与我的示例不符。