1. HTML基本结构

XML/HTML Code 复制内容到剪贴板 <!DOCTYPEhtml>      < htmlxmlns htmlxmlns = "http://www.w3.org/1999/xhtml" >       < headrunat headrunat = "server" >            < title > layout </ title >       </ head >       < body >            < divclass divclass = "header" >                < h1 > head of your website. </ h1 >            </ div >            < divclass divclass = "wrapper" >                < divclass divclass = "content" >                    < h2 > Your website content here. </ h2 >                    < scripttype scripttype = "text/javascript" >                       for(var  i  =  0 ; i < 100 ;i ){                           document.write(i   " < br   /> ");                       }                    </ script >                </ div >                < divclass divclass = "clear" > <!-- 必不可少 --> </ div >            </ div >            < divclass divclass = "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%; /* IE6 hack*/                    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固定在页面底部的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。