我最近寫網頁的時候，經常碰到一個普遍的問題，經過我的查閱和嘗試，終於解決了這一問題，這里有兩種方法提供給大家，如果博友還有更好的方法，歡迎補充。
一.使用min-width屬性：
我們先看看下面這段代碼（html）：
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 2 <head> 3 <title>無標題文檔</title> 4 <meta charset="utf-8" /> 5 <style type="text/css"> 6 body {margin: 0px;padding:0px;} 7 .top {width: 100%; height: 60px;background: green;} 8 .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;} 9 .nav p {width: 1000px;height: 60px; text-align: center;} 10 </style> 11 </head> 12 <body> 13 <div class="top"> 14 <div class="nav"><p>這是導航區域</p></div> 15 </div> 16 </body> 17 </html>
瀏覽器全屏時顯示如下（顯示正常）：
如果有人問nav區域設置高度同樣為60px；為什么紅色的邊框超出了高度，那是因為邊框設置了2px，所以總高度多了4個像素，所以超出了范圍。要想要不超出，所以需要在nav區域的高度上減去4個像素。
圖1 瀏覽器窗口全屏顯示
當我們把瀏覽器窗口變小時，我們會發現，這時候就會有問題出現了，如下圖：
圖2 瀏覽器變小，顯示錯誤
為什么會出現這樣錯位的問題呢？我們來分析一下。首先要知道，top區域寬度100%，是相對於瀏覽器來說的。就上圖而言，這里有個等式：紅色邊框寬度（nav） = 綠色區域（top）+空白區域。當瀏覽器窗口變小，而且瀏覽器的寬度小於nav區域的1000px時，當我們把下面的滾動條拉到最右邊時，發現出了錯。那我們應該怎么來修改這個錯誤，就用到了min-width屬性，意思是最小寬度。
把此屬性加到top區域里面： .top {min-width: 1000px; width: 100%; height: 60px;background: green;}，其他代碼不變。在運行一下，如下圖所示：
圖3 加了min-width ，瀏覽器變小，顯示正常
從上圖可以看出，滾動條拉倒最右邊，也出現了正確的情況。綠色填充到了nav區域。所以問題得到了解決。為什么問題會得到解決呢？
答：top區域加了min-width屬性，設置為1000px，意思是top區域的最小寬度為1000px，所以當瀏覽器窗口變小到小於1000時，top的寬度為1000px，而nav的寬度也是1000px，所以就剛好完全顯示，不會出錯了。
二.現在我們講解第二種方法，用圖片填充整個背景。
代碼如下：
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 2 <head> 3 <title>無標題文檔</title> 4 <meta charset="utf-8" /> 5 <style type="text/css"> 6 body {margin: 0px;padding:0px;background:url(4.jpg) repeat;}/*使用圖片填充整個body*/ 7 .nav {width: 1000px;height: 60px;border: 2px solid red;margin: 0 auto;} 8 .nav p {width: 1000px;height: 60px; text-align: center;} 9 </style> 10 </head> 11 <body> 12 <div class="top"> 13 <div class="nav"><p>這是導航區域</p></div> 14 </div> 15 </body> 16 </html>
使用圖片重復填充整個body之后，再添加導航區域nav居中顯示，瀏覽器窗口變小的時候顯示如下：
圖4 使用圖片填充body，顯示正常。
從上圖我們發現，滾動條拉倒右邊，還是顯示正常，也就是問題已經得到了解決。
但是有同學可能會問，如果選擇這種方法，背景不是我想要的效果怎么樣？
答：做項目的時候，都是給一張psd圖片，你用ps從網頁上面直到最下面切一張包含整個body顏色的小圖，用來填充body就好了。以后創建的div再設置背景色會覆蓋掉body色，所以完全沒有影響。
這是本人自己想到的兩種方法，個人覺得第二種還比較方便。如果還有其他的方法，歡迎大家補充！