2

フッター 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>

問題のある Web サイト: http://manpoints.uk.to/image/30

4

2 に答える 2

5

追加

clear: both;

フッター要素に。その上のコンテンツがフローティングされており、クリアされていないためです。

于 2012-05-22T20:51:51.457 に答える
1

私も同じ問題を抱えていました。この例を使用して修正できました。

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

于 2012-05-22T21:14:48.940 に答える