调整浏览器大小时固定页脚不合适答案

【问题标题】：Fixed footer gets out of place when resizing browser调整浏览器大小时固定页脚不合适
【发布时间】：2013-11-21 00:42:02
【问题描述】：

我有一个 970 像素宽度的固定页脚，但是当我将浏览器的大小调整为更小时，整个页脚会一直离开屏幕，而页脚的中心位于中间。我希望在调整小于 970 像素宽度的浏览器时，页脚停止离开屏幕。

CSS

footer{
    z-index: 1;
    position: fixed;
    width: 940px;
    line-height: 30px;
    background: linear-gradient(#232323, #1f1f1f);
    margin: 0 auto 0 -485px;
    padding: 0 30px;
    bottom: 0;
    left: 50%;
    text-align: center;
}

HTML

<footer>Footer Text</footer>

有人知道我是怎么做到的吗？

【问题讨论】：

你的页脚有一个固定的宽度，如果你将屏幕调整到小于宽度，页脚将离开屏幕或被窗口截断

标签： html css

【解决方案1】：

您的左边距为负数-485px，左边距为50%。我会用

footer {
    margin: 0 auto;
}

并完全删除左侧位置。

【讨论】：

是的，通常水平居中更容易。 OP 尝试使用垂直居中技巧进行居中。我不确定 OP 的离屏是什么意思，因为他有一个固定宽度的页脚，在调整页脚大小时无论如何都会离开屏幕
IIRC，第一个版本没有text-align: center。没有中心，当窗口缩小小于页脚宽度时，文本将消失到左侧。以JSFiddle 为例。
当我这样做时，它确实会做我想要的，但是它不是居中而是与左侧对齐。

【解决方案2】：

没有任何 HTML 很难说，但我猜你有两个选择：

如果浏览器小于 940 像素，您想阻止页脚大于浏览器，如果是这样，为什么不将其设置为具有 width:100% 和 max-width:940px;。你可能还想要overflow:hidden;，
您的页脚未正确居中，在这种情况下，使用width:100%（或计算为与您的页面一样宽）将其包裹在一个 div 中，并使用text-align:center; 并给出页脚（放置在 div 内）@ 987654327@

类似this fiddle

【讨论】：