注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

牧野流星

每个人心中都有一个梦想..........

 
 
 

日志

 
 

纯CSS方法实现DIV固定网页底部  

2014-08-09 10:02:09|  分类: CSS+DIV |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

基本思路

首先考虑外层设置一个容器DIV,id设为#container,使他的高度为浏览器窗口的高度,然后将#footer这个DIV设置为#container的子DIV,并使用绝对定位的方式,使他固定到#container的底端,以实现希望的把DIV固定在网页底部效果。

改变浏览器的高度和宽度,可以看到Footer部分的效果。

两种方法。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>纯css实现固定底部</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,html{  
margin:0;  
padding:0;  
font:12px/1.5arial;  
height:100%;  
 }
#container{  
min-height:100%;  
position:relative;  
}  
#content{  
padding:10px;  
padding-bottom:60px;  
}  
#footer{  
position:absolute;  
bottom:0;  
padding:10px0;  
background-color:#AAA;  
width:100%;  
}  
#footer h1{  
font:20px/2Arial;  
margin:0;  
padding:010px;  
}
</style>
</head>
<body> 
<DIV id="container"> 
<DIV id="content"> 
<h1>Content</h1> 
<p>请改变浏览器窗口的高度,以观察footer效果。</p> 
<p>这里是示例文字,DIV固定………,这里是示例文字。</p> 
</DIV> 
<DIV id="footer"> 
<h1>Footer</h1> 
</DIV>
</DIV> 
</body></html>

第二种方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>纯css实现固定底部</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/* 主要部分 */
html, body, .container { height: 100%; margin: 0; padding: 0; }
body > .container { height: auto; min-height: 100%; }
.content { padding-bottom: 60px; }
.footer { clear: both; position: relative; z-index: 10; height: 60px; margin-top: -60px; }
/* 样式部分 */
body { font: .75em/normal "Lucida Sans", "Lucida Grande", sans-serif; }
a, a:link, a:visited { color: #c6762f; text-decoration: underoline; }
p { margin-bottom: 1em; }
#about { padding: 50px;outline:none;}
.footer { background-color: black; color: white; font-size: 200%; text-align: center; line-height: 60px; }
</style>
</head>
<body>
<div class="container">
<div id="content">
<div id="about" contenteditable='true'>
<p>可以通过最大化,最小化窗口,拉伸窗口来看本示例的效果。</p>
<p>可以通过最大化,最小化窗口,拉伸窗口来看本示例的效果。</p>
<p>可以通过最大化,最小化窗口,拉伸窗口来看本示例的效果。</p>
</div>
</div>
</div>
<div class="footer">
固定不变的底部
</div>
</body>
</html>
  评论这张
 
阅读(149)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018