我正在为一个大学项目编写一个网络界面，我一直在处理这个问题：
我希望我的页脚固定在底部，这样无论我使用哪个屏幕或切换全屏模式，它都会就位
它适用于除 IE7 之外的所有其他浏览器（我不必支持以前的版本）
超文本标记语言
<div id="menu">
<a href="information.html" rel="shadowbox;height=500;width=650" title="INFORMATION" >
<img src="images/info.png" alt="information icon" />
</a>
<a href="images/bricks_of_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES" >
<img src="images/image.png" alt="image icon" />
</a>
<a href="music_player.swf" title="MUSIC" rel="shadowbox;height=400;width=600" >
<img src="images/music.png" alt="music icon" />
</a>
<a href="#" title="MOVIES"><img src="images/television.png" alt="movies icon" /></a>
<a href="quotes.html" title="QUOTES" rel="shadowbox;height=300;width=650" >
<img src="images/male_user.png" alt="male user icon" />
</a>
<a href="#" title="REFERENCES">
<img src="images/search_globe.png" alt="search globe icon" />
</a>
</div>
<a href="images/destiny_1.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
<a href="images/destiny_carma_jewell.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
<a href="images/destiny-joan-marie.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
<a href="images/pursuing_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
<div class="clear"></div>
<div id="destiny">
Discover more about the word <span class="strong">DESTINY </span>! Click one of the icon above!
(F11 Toggle Full / Standard screen)
</div>
<div id="footer">
<ul id="breadcrumbs">
<li>Disclaimer</li>
<li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li>
<li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li>
<li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li>
</ul>
</div>
</div>
CSS:
#wrapper{
text-align:center;
margin:0 auto;
width:750px;
height:430px;
border:1px solid #fff;
}
#menu{
position:relative;
margin:0 auto;
top:350px;
width:450px;
height:60px;
}
#destiny{
position:relative;
top:380px;
color:#FFF;
font-size:1.5em;
font-weight:bold;
border:1px solid #fff;
}
#breadcrumbs{
list-style:none;
}
#breadcrumbs li{
display:inline;
color:#FFF;
}
#footer{
position:absolute;
width:750px;
height:60px;
margin:0 auto;
text-align:center;
border:1px solid #fff;
bottom:0;
}
.clear{
clear:both;
}
白色边框仅用于调试目的
该应用程序托管于http://www.eezzyweb.com/destiny/ http://www.eezzyweb.com/destiny/
任何建议表示赞赏
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
#footer, #push {
height: 150px; /* #push must be the same height as #footer */
}
HTML:
<body>
<div id="wrapper">
<!-- ALL non-footer content goes in this DIV. -->
<div id="push"></div>
</div>
<div id="footer">
<ul id="breadcrumbs">
<li>Disclaimer</li>
<li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li>
<li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li>
<li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li>
</ul>
</div>
</body>
代码改编自http://ryanfait.com/sticky-footer/ http://ryanfait.com/sticky-footer/
我在我开发的几个网站上使用了这种方法，包括我的个人网站。效果很好！即使在 IE6 中（尽管你说不需要）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
