當調整瀏覽器大小時，固定頁腳不正確

我有一個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/）爲例。 –

當我這樣做時，它實際上做了我想要的，但它不居中，但與左邊對齊。 –

當調整瀏覽器大小時，固定頁腳不正確

回答

相關問題