css如何定位网站的footer（用DIV+CSS让footer始终在底部） 平时拿CSS布局都是一些内容比较多的网站,前两天用CSS+DIV弄了个内容少的页面,发现了一个小问题,可能大家都会遇到,那就是网站FOOTER的定位,如果内容比较少的话,页面的FOOTER就会随着内容的减少跑到上面去,不是乖乖的在下面呆着,害得我研究了半天。
对于变量的内容，使得footer始终存在底部。并且整合了列表选项。使得页面排版更加工整。
一个典型的固定宽度的布局，该布局由顶部的一个标题，一个三列内容的区域（主内容列，每侧有一个工具条），和页面底部的一个页脚所组成。
--------------最后效果如下---------------------------------------
-----------以下是XHTML代码------------
1 <body> 2 <div id="content"> 3 <div id="head"> 4 <h1>hello</h1> 5 </div> 6 <div id="side1"> 7 <h3>side1</h3> 8 <ul> 9 <li>Let me not to the marriage of true minds</li> 10 <li>Admit impediments; love is not love</li> 11 <li>Which alters when it alteration finds</li> 12 <li>Or bends with the remover to remove</li> 13 <li>Oh, no, it is an ever fixed mark</li> 14 </ul> 15 </div>16 <div id="main">17 <h1>main</h1>18 <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>19 <p>文字文字文字文字文字文字文字文字文字文字</p>20 <p> </p>21 <p> </p>22 <p> </p>23 <p> </p>24 <p> </p>25 <p> </p>26 27 28 </div>29 <div id="side2"> 30 <h3>side2</h3> 31 <ul> 32 <li>Let me not to the marriage of true minds</li> 33 <li>Admit impediments; love is not love</li> 34 <li>Which alters when it alteration finds</li> 35 </ul> 36 </div> 37 <div id="footer">38 <h1>Footer</h1>39 <div>40 </div>41 </body>-----------以下是CSS代码---------------------------
1 body,html { 2 margin: 0; 3 padding: 0; 4 font: 12px/1.5 arial; 5 height:100%; 6 } 7 h1,h2,h3 { 8 margin-top: 0px; 9 padding-top: 0px; 10 } 11 #content {12 min-height:100%;13 height:auto;14 position: relative;15 16 }17 #head18 {19 position: absolute;20 left: 0px;21 top: 0px; 22 width:750px; 23 height:100px;24 background-color:#FF0 25 }26 div#side1 { 27 position:absolute; 28 width:150px; 29 top: 100px; 30 left:0px; 31 background-color: #FF6666; 32 } 33 #main {34 padding-bottom: 60px;35 position: relative;36 left: 150px;37 top: 100px;38 width: 450px;39 margin: 0px;40 background-color: #999999;41 }42 div#side2 {43 position:absolute;44 width:150px;45 top: 100px;46 left: 600px;47 background-color: #00FF66;48 } 49 #footer {50 position: absolute;51 bottom: 0;52 padding: 10px 0;53 background-color: #AAA;54 width: 100%;55 }56 #footer h1 {57 font: 20px/2 Arial;58 margin:0;59 padding:0 10px;60 }61 62 </style>转载于:https://www.cnblogs.com/dzj007/archive/2012/02/21/2362040.html
相关资源：JAVA上百实例源码以及开源项目