[CSS]贴在底部的布局

2009/12/03  |  16:00分类:Css  |  标签:  |  366 views

对于前端开发人员来说,页脚的处理时常让我们比较头痛。因为,如果页面比较长还好说,如果页面比较短,则页脚则会跑到页面的中间部位,十分的不雅观。

那么有什么办法能让页脚乖乖的出现在每页的最下方呢?方法当然是有的,一种是使用js+css的方法,这种办法比较好理解,实现也比较的简单,这也是大家用的比较多的办法。但是,如果用户禁用了js,那么这种方法自然也就不再能够实现。那我们自然的想到了使用纯css。

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> 
<html  xmlns=”http://www.w3.org/1999/xhtml“> 
<head> 
<title>我个是非常好的小页脚</title> 
<meta http-equiv=”Content-Type” content=”text/html” charset=”utf-8″    /> 
<style type=”text/css”> 
html{height:100%;overflow:auto;}  
body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}  
.main{border-bottom:60px solid #fff;}  
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}  
</style> 
</head> 


<body> 
    <div> 
        <div id=”topbar”>菜单部分</div> 
        <div> 
                我是主体,我是核心<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
               <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
               虽然我是主体,但是你可以删除我其中的内容再看看我下面的页脚  
        </div> 
        <div id=”footer”> 
            我是安分守己的页脚,我只安静的待在页面的最下方  
        </div> 
    </div> 
</body> 
</html>

这个效果的好处我想不需要多说,大家看看也就明白了。

FF2.0+、FF3.0+、IE6、IE7、Safari、Opera、Chrome都通过。

喜欢本文,那就收藏到: Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

发表您的评论