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

当屏幕分辨率达到某个点时，我的页脚会出现一些奇怪的问题-它可以响应并与屏幕尺寸配合使用，但是只有页脚的上半部分具有背景。我将底部设置为0；和位置设置为绝对，但看起来并不好。任何帮助，将不胜感激。

链接到网页（一定要随心所欲地了解我在说什么）：http://cardspoiler.com/Cardspoiler/MSoG/Navbar/Mage.html

HTML：https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/MSoG/Navbar/Mage.html

CSS：https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/Cardspoiler.css

最佳答案

我看到的问题在.left和.right类中。您在它们上具有transform: 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属性，而是从margin-bottom中删除​​了ul并向其中添加了一些padding-bottom。从max-height标记中删除footer时，填充会在页面底部留出一定的空间，并扩展页脚背景，因此底部不会留有空隙。

关于html - 奇怪的响应/粘性页脚问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41818653/