利用CSS使footer固定在页面底部的实例代码_ Div+Css教程-查字典教程网
利用CSS使footer固定在页面底部的实例代码
利用CSS使footer固定在页面底部的实例代码
发布时间:2016-12-27 来源:查字典编辑
摘要:1.HTML基本结构XML/HTMLCode复制内容到剪贴板layoutheadofyourwebsite.Yourwebsiteconte...

1. HTML基本结构

XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <headrunatheadrunat="server"> <title>layout</title> </head> <body> <divclassdivclass="header"> <h1>headofyourwebsite.</h1> </div> <divclassdivclass="wrapper"> <divclassdivclass="content"> <h2>Yourwebsitecontenthere.</h2> <scripttypescripttype="text/javascript"> for(vari=0;i<100;i++){ document.write(i+"<br/>"); } </script> </div> <divclassdivclass="clear"><></div> </div> <divclassdivclass="footer"> <div><h1> Copyright(c)2012</h1></div> </div> </body> </html>

2. CSS样式

CSS Code复制内容到剪贴板 <styletype="text/css"> *{ margin:0;/*把默认值都设为0*/ } html,body { height:100%; width:85%; margin:0auto;/*居中*/ } .header { height:100px; background-color:Fuchsia; } .wrapper { min-height:100%;/*IE6hack*/ height:auto!important;/*height优先级*/ height:100%; margin:0auto-4em;/*负值必须等于footer的高度*/ } .content { background-color:Silver; } .clear/*清除浮动*/ { height:4em;/*clear的height必须和footer的值样高*/ clear:both; } .footer { height:4em; background-color:Aqua; } </style>

以上这篇利用CSS使footer固定在页面底部的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持查字典教程网。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类