Html 奇怪的响应/粘性页脚问题

当屏幕分辨率达到某一点时，我的页脚会出现一些奇怪的问题——它会响应屏幕大小，但只有页脚的上半部分有背景。我已将底部设置为0；位置设置为绝对，但看起来不太好。任何帮助都将不胜感激

链接到网页（一定要玩响应性游戏，看看我在说什么）：

HTML:

---

CSS:

我看到的问题在

.left

和

.right

类中。你有一个

转换：translateY（25%）属性，将其向下推过其自然位置。如果您希望页脚位于页面底部，并具有相同的外观，则它们现在会更改CSS，如下所示：

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(128,128,128,.3);
    text-align: center;
    border-top: 1px solid #232526;
}

.left, .right {
    display: inline-block;
    list-style-type: none;
    width: auto;
    font-size: 100%;
    vertical-align: top;
    bottom: 0;
    margin-bottom: 0;
    padding-bottom: 10px;
}

.right li {
    text-align: left;
}

基本上，我只是从那些div中删除了所有的
translate
属性，从
ul
s中删除了
margin-bottom
，并添加了一些
padding-bottom
。从
footer
标记中删除
max height
后，填充会在页面底部留出一些空间，并扩展页脚背景，因此不会在底部留下间隙。
我正在使用移动ATM，但我迫不及待地想尝试此操作。谢谢你的努力！