css - 页脚在 div 上浮动

Question

我有一个容器 div，其外部放置了一个页脚 div。首先，我的页脚在屏幕上，我不想使用“绝对”规则来定位它。如何将页脚放在页面底部？

CSS 代码：

#container{
margin:auto;
width:85%;
height:auto;
}
#header {
background-image: url('http://static.manpoints.uk.to/images/header.png');
background-repeat: repeat-x;
background-color: #dd4814;
height: 140px;
}
#footer{
background-image: url('http://static.manpoints.uk.to/images/gradient-grey.png');
background-repeat: repeat-x;
background-color: #F0F0F0;
padding: 15px;
margin-top: 30px;
height: 90px;
width: 100%;
position: relative;
} 
#content {
margin: 10px;
width: 75%;
height: 100%;
float: left;
}

HTML 代码：

<div id="container">
<div id="header">
<div id="logo"><span>Earn Man Points<br>Earn Respect</span></div>
</div>
<div id="menubar" align="center">
<ul id="menu">
<li><?php menuIndex(); ?></li>
<li><?php menuUser(); ?></li>
<li><a href="/leaderboard/" title="View the ManPoints Leaderboard">Leaderboard</a><li>
<li><a href="/upload.php" title="Upload content to Man Points">Upload</a></li>
</ul>
</div>
<div id="content">
<h1>Title</h1>
<div id="image_display"><img src="img.jpg"></div>
<div id="image_info">
<h2>Man Points: 7</h2>
<p>Next Image</p>
</div>
</div>
</div>
<div id="footer">Footer Content</div>

有问题的网站：http: //manpoints.uk.to/image/30

Answer 1

添加

clear: both;

到页脚元素。这是因为它上面的内容是浮动的，没有被清除。

Answer 2

我有同样的问题。我能够使用这个例子来修复它。

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/