搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

如何利用CSS使footer固定在页面底部的实例代码

发布时间：2023-01-04 00:33:26 来源：互联网
.
每天坐在教室里，但眼神总是看着窗外的风景，不知不觉的默默发呆。我一直急速前行，穿梭于人人之间。试图借应接不暇的风景让我褪去对你的思念。

1. HTML基本结构

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
  5. <headrunatheadrunat="server">
  7. <title>layout</title>
  9. </head>
  11. <body>
  13. <divclassdivclass="header">
  15. <h1>headofyourwebsite.</h1>
  17. </div>
  19. <divclassdivclass="wrapper">
  21. <divclassdivclass="content">
  23. <h2>Yourwebsitecontenthere.</h2>
  25. <scripttypescripttype="text/javascript">
  27. for(vari=0;i<100;i++){
  29. document.write(i+"<br/>");
  31. }
  33. </script>
  35. </div>
  37. <divclassdivclass="clear"><!--必不可少--></div>
  39. </div>
  41. <divclassdivclass="footer">
  43. <div><h1>
  45. Copyright(c)2012</h1></div>
  47. </div>
  49. </body>
  51. </html>

2. CSS样式

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  3. *{
  5. margin:0;/*把默认值都设为0*/
  7. }
  9. html,body
  11. {
  13. height:100%;
  15. width:85%;
  17. margin:0auto;/*居中*/
  19. }
  23. .header
  25. {
  27. height:100px;
  29. background-color:Fuchsia;
  31. }
  35. .wrapper
  37. {
  39. min-height:100%;/*IE6hack*/
  41. height:auto!important;/*height优先级*/
  43. height:100%;
  45. margin:0auto-4em;/*负值必须等于footer的高度*/
  47. }
  51. .content
  53. {
  55. background-color:Silver;
  57. }
  61. .clear/*清除浮动*/
  63. {
  65. height:4em;/*clear的height必须和footer的值样高*/
  67. clear:both;
  69. }
  73. .footer
  75. {
  77. height:4em;
  79. background-color:Aqua;
  81. }
  83. </style>

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

以下您可能有感兴趣的文章:
标签： CSS footer
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图