隨著技術的發展，各種服務端越來越多，包括各種瀏覽器，以及移動端的瀏覽器，因此對於前端技術的相容，也越來越值得前端開發人員思考，由此，百分比佈局成為前端開發的潮流。

     所謂的百分比佈局，即對於元素的寬高度的屬性不再採用定值定義，而是採用百分比值達到響應式適應客戶端螢幕的佈局效果。那麼，此處的重點就是百分比的設定問題。

      眾所周知，一個元素要在頁面上正確的展示，需得有自身確定的寬高，表現形式就是在瀏覽器上佔據一塊固定大小的空間，這似乎與百分比不定值矛盾。其實，我們說的百分比是指在伺服器端定義時採用百分比定義，而經過客戶端的解析之後，還是會適應客戶端產生特定值。

      一個div塊級元素沒有主動為其設定寬度和高度，瀏覽器會為其分配可使用的最大寬度(比如全屏寬度)，但是不負責分配高度，塊級元素的高度是由子元素堆砌撐起來的。而元素高度百分比需要向上遍歷父標籤要找到一個定值高度才能起作用，如果中途有個height為auto或是沒有設定height屬性，則高度百分比不起作用，這樣就陷入了一個死迴圈。因此必須要給根結點設一個確定的值，以滿足效果。

       對於開發者來說，基本操作的最高結點是body，需要設定  body{height:100%},這樣body下的所有標籤才可以使用百分比達到效果，但是對於瀏覽器來說，只設置body高度還不夠， 存放body的容器必須也要具有高度，body的百分比才有意義，否則  0 * 100% = 0，因此需要對  html標籤頁設定高度  html{height:100%}。

      總結：百分比佈局需要有一個確定寬高的根結點，關鍵樣式設定是：html，body{width:100%；height:100%}