页脚出现在较小的屏幕上

Question

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

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

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

下面提到了我的代码片段。请求您提供解决方案。

编辑 1：codepen 提供了一个（静态）场景 url（请查看较小的屏幕尺寸）：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

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

页脚出现在较小的屏幕上

Footer comes up in smaller screens

html

css

footer