Question

当屏幕分辨率达到某个点时，我的页脚出现了一些奇怪的问题 - 它响应并使用屏幕大小，但只有页脚的上半部分有背景。我将底部设置为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

Answer 1

我看到的问题出在.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;
}

基本上，我刚从translate中移除了margin-bottom的div中删除了所有ul个属性，并向其添加了一些padding-bottom。从max-height标记中删除footer后，填充会从页面底部提供一些空间并展开页脚背景，因此它不会在底部留下空隙。

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

1 个答案: