初学HTML+CSS布局，尝试自己写一个百度首页，可是footer的定位遇到麻烦而且百度没有好的解决方法，在此记录下逐步的过程。记录之，备忘。
初学，解决方法难免出现不妥之处，也请看到这篇文章的前辈指点一二，在此先谢过。
首先是设置为
footer{ clear: both; display: block; position: absolute; bottom: 100px; } 时效果为：确实绝对定位到了底部。可是因为是绝对定位。使用 footer{ clear: both; display: block; text-align: center; margin: 0px auto; position: absolute; bottom: 100px; }并没有居中的效果，想想这应该是footer的宽度设置问题，设置宽度width之后果断有效果，考虑到不同尺寸显示器的兼容性问题，那么能够调用JS动态设置width值，代码例如以下： <!--动态改变footer的width值。实现文字居中效果。--> <script> var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("footer").style.width=w + "px"; </script> 居中底部都搞定了，出现下面问题： 问题1、缩小水平方向的窗体，那么以上设置等于0。窗体改变后。不会随窗体变化而变化，也就是不再是当前显示的有效窗体居中，出现了滚动栏。
问题2、
缩小垂直方向的窗体，相同的，出现下面情况，也就是和页面中间部分重叠。
水平居中怎么实现呢？事实上非常easy！设置为width: 100%;
footer{ clear: both; display: block; text-align: center; margin: 0px auto; position: absolute; bottom: 100px; width: 100%; }到此水平居中搞定，也就不用傻不拉几的写脚本了！
新问题问题3：垂直方向上移的问题能够通过设置top值来解决。可是设置top后bottom就无用了（逻辑上这个肯定冲突，设置了top已经定位了。又设置了bottom，那么浏览器听谁的？同理left和right也存在悖论）。详细的能够试一下，那怎么办呢？
问题的根源在于使用绝对定位和设置bottom时，footer是尾随浏览器窗体变化而变化的。那我们要做的就是打破这样的格局。
解决思路1、当界面上下伸缩时。动态调整css样式就可以：详细为当达到某一位置时，使用buttom定位，当超过这个位置时。使用top定位，这样就能够保证。缩小到某一个值时距离顶部距离不变，放大到超过这个值时，距离底部不变。详细实现例如以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link type="text/css" href="http://www.likecs.com/css/main.css"> <title>百度一下，你就知道</title> <script> function myFunc() { var winHeight=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; if (parseInt(winHeight)<750){ document.getElementById("footer").setAttribute("class", "dAdjustTop"); /*document.getElementById("inputtext").value=winHeight+" "+document.getElementById("footer").getAttribute("class");*/ } else { document.getElementById("footer").setAttribute("class", "dAdjustButtom"); /*document.getElementById("inputtext").value=winHeight+" "+document.getElementById("footer").getAttribute("class");*/ } } </script> </head> <bodyonresize="myFunc()"> <nav> <a href="http://news.baidu.com" target="_blank">新闻</a> <a href="http://www.hao123.com" target="_blank">hao123</a> <a href="http://map.baidu.com" target="_blank">地图</a> <a href="http://v.baidu.com" target="_blank">视频</a> <a href="http://tieba.baidu.com" target="_blank">贴吧</a> </nav> <div> <div> <!--<img hidefocus="true" src="http://www.baidu.com/img/bd_logo1.png">--> <img src="http://www.likecs.com/images/bd_logo1.png"> </div> <div> <input value="" maxlength="100" autocomplete="off"> <input type="submit" value="百度一下"> </div> </div> <footer> <p> <a href="http://www.baidu.com/cache/sethelp/index.html" target="_blank">把百度设为主页</a> <a href="http://home.baidu.com">关于百度</a> <a href="http://ir.baidu.com">About Baidu</a> </p> <p> ©2014 Baidu <a href="http://www.likecs.com/duty/">使用百度前必读</a> 京ICP证030173号 </p> <address> Written by <a href="http://blog.csdn.net/zhanh1218">The_Third_Wave</a> </address> </footer> </body> </html>CSS为body{ background-color: #FFFFFF; margin: 0px auto; padding: 0px; } nav{ display: block; width: 400px; height: 100px; float: right; } nav a { float: right; display: inline-block; padding: 15px; color: black; font-weight: bold; } #mid{ position: relative; top: 100px; width: 100%; min-width: 610px; /* 保证图片和输入框绝对居中 */ height: 200px; text-align: center; /* 仅仅对input有效，图片无效 */ float: left; padding-bottom: 100px; /*重要！给footer预留的空间*/ } img{ display: block; width: 270px; height: 129px; margin: 0px auto; } #logo{ margin-bottom: 20px; /* 保证图片和输入框的间距 */ } #input{ display: block; width:100%; min-width: 610px; /* 保证子节点两个input不换行 */ height: 40px; padding: 0px; } #inputtext{ width: 520px; height: 22px; margin-right: 0px; padding: 6px 0px 5px 0px; font: 16px/22px arial; border: 1px #CECABC solid; /*默认边框色为灰色*/ } #button{ display: inline-block; width: 80px; height: 35px; font: 16px/22px arial; margin: 0px 0px 0px -6px; padding: 5px 0px 5px 0px; background-color: blue; border: 1px blue solid; } footer { /*border: 1px red solid;*/ clear: both; display: block; text-align: center; width: 100%; height: 120px; min-width: 610px; /* 保证文字inline-block效果时不换行 */ } .dAdjustButtom{ position: absolute; bottom: 100px; } .dAdjustTop{ position: absolute; top: 530px; /* 750-120-100 JS中tag-footer的height-mid的padding-bottom*/ }代码解析，利用onresize事件，动态设置CSS，我使用class值的改变来达到目的。详细请看JS代码。