HTML5：footer定位（底部+置中）的探討+div圖片置中問題，
初學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，視窗改變後，不會隨視窗變化而變化，也就是不再是當前顯示的有效視窗置中，出現了捲軸；
縮小垂直方向的視窗，同樣的，出現以下情況，也就是和頁面中間部分重疊！
水平置中怎麼實現呢？其實很簡單！設定為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 rel="stylesheet" type="text/css" href="css/main.css"> <title>百度一下，你就知道</title> <script> function myFunc() { //擷取視窗高度 if (window.innerHeight) winHeight=window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight=document.body.clientHeight; //通過深入Document內部對body進行檢測，擷取視窗大小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight=document.documentElement.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><body onload="myFunc() "onresize="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 id="mid"> <div id="logo"> <!--<img hidefocus="true" src="http://www.baidu.com/img/bd_logo1.png">--> <img src="images/bd_logo1.png"> </div> <div id="input"> <input id="inputtext" value="" maxlength="100" autocomplete="off"> <input id="button" type="submit" value="百度一下"> </div> </div> <footer id="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="/duty/" name="tj_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代碼。
解決思路2、我們讓他隨內容變化，當內容撐不滿螢幕時，我們固定footer在底部，在螢幕裝不下內容時，我們要保證footer看不見了，也就是拖動頁面到最底部時才出現！即做到永遠固定於頁面底部！怎麼做？
這裡有篇不錯的文章，點擊開啟參考：如何將頁尾固定在頁面底部
圖片在div中怎麼置中，直接上代碼：
<div id="mid"> <div id="logo"> <!--<img hidefocus="true" src="http://www.baidu.com/img/bd_logo1.png">--> <img src="images/bd_logo1.png"> </div> <div id="input"> <input id="inputtext" value="111" maxlength="100" autocomplete="off"> <input id="button" type="submit" value="百度一下"> </div> </div>
#mid{ position: relative; top: 100px; width: 100%; min-width: 610px; /* 保證圖片和輸入框絕對置中 */ height: 200px; text-align: center; /* 只對input有效，圖片無效 */ float: left;}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;}
總結：
1、水平置中可以使用width: 100%和text-align: center;來搞定；
2、垂直置中並實現動態變化可以使用onresize事件+js動態設定布局（position: absolute; 以及top/bottom）來實現；
3、 圖片在div中置中設定：使用margin: 0px auto;
4、怎麼保證左右展開時圖片和輸入框的絕對置中效果不變，設定最小寬度min-width的值一致即可！其他使用了display: inline-block的元素同理；
本文由@The_Third_Wave（Blog地址：http://blog.csdn.net/zhanh1218）原創。還有未涉及的，會不定期更新，有錯誤請指正。
如果你看到這篇博文時發現不完整，那是我為防止爬蟲先發布一半的原因，請看原作者Blog。
如果這篇博文對您有協助，為了好的網路環境，不建議轉載，建議收藏！如果您一定要轉載，請帶上尾碼和本文地址。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
