居中固定/锚定页脚？

我已经看过这里发布的一些问题，但是一切似乎都过于复杂，应该是如此简单的任务？我只想要一个页脚，无论页面的垂直长度如何，都会固定在屏幕的底部。一切正常，除非我不能让页脚居中，它总是左对齐。？谢谢！ 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

居中固定/锚定页脚？

回答

相关问题