当调整浏览器大小时，固定页脚不正确

我有一个970px宽度的固定页脚，但是当我缩小浏览器的大小时，整个页脚都会以页脚中间位置离开屏幕。调整小于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>

任何人都知道我能做到这一点？

来源

2013-11-20 Kid Diamond

你的页脚有一个固定的宽度，如果你调整你的屏幕的尺寸小于宽度，页脚将被关闭或被窗口切断 – Huangism

很难说没有任何HTML，但是从我可以猜到，你有两种选择：

要停止页脚比浏览器更大，如果浏览器是< 940px，如果那么为什么不把它设置为width:100%和max-width:940px;。您可能还需要overflow:hidden;，
页脚心不是居中正确，在这种情况下，与width:100%把它包装一个div内（或计算一样宽，你的页面）与text-align:center;，给页脚（放在专区内） margin:0 auto;

喜欢的东西this fiddle

来源

2013-11-20 16:33:59 SW4

你的第二个解决方案为我做了诀窍！谢谢。 –

你的-485px负左边距和50%左侧位置。我只想使用

footer { 
    margin: 0 auto; 
}

并完全删除左边的位置。

来源

2013-11-20 16:42:02

通常水平居中更容易。 OP会尝试使用垂直居中技巧来居中。我不确定屏幕上显示的OP是什么意思，因为在调整页脚大小时，页脚有固定宽度的页脚会跳出屏幕，不管是什么 – Huangism

IIRC，第一个版本没有'text-align：center'。如果没有中心，当窗口缩小小于页脚宽度时，文本将消失在左侧。以[JSFiddle]（http://jsfiddle.net/fv2eN/）为例。 –

当我这样做时，它实际上做了我想要的，但它不居中，但与左边对齐。 –

当调整浏览器大小时，固定页脚不正确

回答

相关问题