居中固定/錨定頁腳？

我已經看過這裏發佈的一些問題，但是一切似乎都過於複雜，應該是如此簡單的任務？我只想要一個頁腳，無論頁面的垂直長度如何，都會固定在屏幕的底部。一切正常，除非我不能讓頁腳居中，它總是左對齊。？謝謝！ http://jsfiddle.net/n4xxj/居中固定/錨定頁腳？

<body> 
    <div id="content"></div> 
    <div id="footer"></div> 
</body> 




div { 
width: 960px; 
margin: auto; 
} 

#content { 
background-color: beige; 
border: 1px solid; 
height: 1200px; 
margin-top: 100px; 
margin-bottom: 150px; 
} 

#footer { 
background-color: lightgray; 
border: solid 1px; 
height: 100px; 
position: fixed; 
bottom: 0px; 
}

來源

2012-11-21 user1689272

像這樣http://jsfiddle.net/j08691/n4xxj/2/？ – j08691

margin：auto;應該是保證金：0汽車;和固定的頁腳位置是一個壞主意。內容溢出後會發生什麼？ – Jawad

本網站可能會提供幫助：http://www.cssstickyfooter.com/ – DACrosby

更新您的HTML在包裝的div包裹

<div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

DEMO

來源

2012-11-21 19:34:01

哈哈，打我，看到評論通知爲時已晚，+1，因爲你是第一個，你的解決方案比我的簡單。 –

@HazardinCode：我想這真的是一個「危害代碼」+1 – Jawad

謝謝！這是一個非常簡單的解決方案:)爲什麼將內容和頁腳放在div中突然讓頁腳排成中心？ – user1689272

在這裏你去，你將需要封裝內部div的成爲一個大的#container div和添加到它margin: 0 auto;來對齊它。

請注意，一個完整的修復，你還應該添加這個（這是一個簡單的IE修復）：

body { text-align: center; } 
#container { text-align: left; margin: 0 auto; }

，當然還有#footer的需要有width: 100%;

而且小提琴： http://jsfiddle.net/n4xxj/3/

來源

2012-11-21 19:38:05

居中固定/錨定頁腳？

回答

相關問題