最近在開發乙個簡單的頁面的時候，需要給頁面去做乙個布局，具體部分就是頭部header和內容區域。這裡有乙個要求就是頭部定好寬度以後，需要讓container占有整個螢幕，那最好的辦法就是直接計算頁面的高度，然後減去header的高度，即可得到container的高度。可是，這樣需要js去計算瀏覽器寬高度，感覺有點麻煩，然後也在想有沒有更好的辦法。
對於一些國外**，比較常見的就是百分比布局的方式。那針對於這個頁面，body為真個頁面高度，那header占有了一部分，剩下的直接用百分比表示不就可以啦。
百分比值是一種相對值，任何時候要分析它的效果，都需要正確找到它的參照。
css常見的百分比
屬性參照物
width
基於父類的width
height
基於父類的width
margin
基於父類的width
padding
基於父類的width
left top right bottom
父類的width height width height
font-size
繼承的font-size
line-height
基於當前的font-size
width 與 height
對於聖杯布局和雙飛翼布局，如果是做前端有了一定基礎以後，應該經常聽到這兩種布局，兩者都是針對於三欄布局設計的，是**開發中很不錯的布局選擇。
針對於聖杯布局和雙飛翼布局，網上有很多介紹，這裡給出乙個鏈結，也是我認為寫的比較不錯的一篇文章吧。聖杯布局與雙飛翼的比較
在對百分比布局和聖杯布局有了一定了解以後，我呢寫了乙個demo將這兩個聯絡在一起，沒有px，只有%。
這裡我主要是為了百分比練習的，裡面有很多一些強制性的內容，比如不能使用px，在核心內容區域只能使用聖杯布局（這也是為了聖杯布局擁有的優勢想體現出來）。
首先頁面分為上下兩塊，上面為頭部header，下面為container，需要占有整個螢幕。在contianer裡面需要使用百分比的聖杯布局，兩側left與right都是占有20%的寬度，中間需要占有60%的寬度，頁面布局如下：
index.html
main
left
right
*
html, body, .fullpage
.fullpage
.header
.container
/* 接下來需要設定整個螢幕核心部分，那就是使用雙飛翼和聖杯布局
*/.middle,
.left,
.right
.middle
.left
.right
這裡發現left和right的寬度不再是20%，而是12%（這裡基於寬度1000px作為測驗基準），main部分寬度沒有錯誤，仔細計算，發現left與right的寬度首先是基於100%計算的，在container使用padding=20%以後，中間部分變成了60%。
可是百分比不是基於父類寬度進行計算的麼，這裡的父類contianer的寬度依然是1000px(100%)，這裡需要了解盒子模型以及百分比繼承的屬性width了，width我個人理解是對於乙個塊中可是區域的寬度，在沒有設定border-box屬性，塊的寬度是width+border+padding。所以設定了padding，container可視區域為60%，此時main依然為100%60%=60%，但是對於left與right為20%60%=12%，所以在後面使用position定位到-20%，無法回到剛開始的位置，因為本身的寬度已經改變了。同時因為position中的left屬性是繼承父類的width的，所以這裡再次設定left為20%也不會滿足條件。
那如果為了滿足left與right寬度不改變，依然為20%，應該怎麼做呢？
首先在這個實驗中我使用的就是聖杯布局，那聖杯布局的優勢在於中間是適應的，通過中間的為60%的寬度。那既然中間是自適應的，那我可以使用函式進行計算，然後求解left-right的寬度與padding。
假設padding-left與padding-right為z百分點，設定left和right的初始寬度為y，設定最終left與right的寬度為w(這裡是20%)
所以公式為 （1-2z） y = w = 20%
同時為了聖杯布局最後一步讓left塊重新到最左邊，這裡的 z 的值應該就是20%
所以最後求的的結果就是y = 1/3 也就是 33.333333% z = 20%
設定left與right的width
.left
.right
最後再設定position的left與right的值
.left
.right
demo完成，最後的自適應也滿足，同時也滿足了聖杯布局方式和固定的20%和60%的占有比例。
這裡我確實有點過於追求百分比布局，聖杯布局本來就是兩側定寬，中間自適應，而我這裡三個div都是自適應的，所以也不算真正的聖杯布局。我在這裡的目的主要是為了使用聖杯布局中的中間先渲染的乙個方法，以及設計乙個解決聖杯布局中使用百分比的策略。
百分比布局
參考位址 螢幕的適配是我們android開發最經常做的事情之一，我們一直指望著能夠一套布局適配所有。於是在android5.0之後，提供了android support percent lib，這樣我們可以盡情的使用。使用的時候，我們嗯需要設定的有 layout marginpercent layo...
百分比布局
其中相對布局和幀布局官方是有支援庫的 compile com.android.support percent 25.3.0 但線性布局並沒有 public class percentlinearlayout extends linearlayout override protected void o...
CSS百分比布局
曾經的 布局可能大家都有點陌生了吧，其實我也是基本上沒用過，自從web2.0的興起，重構的思想，這讓 布局就這樣消失了基本上，布局中有用到百分比布局的，在 布局 落下帷幕之後，基本上我們都是讓網頁固定為950 1000px，如果布局使用了百分比寬度 如90 耳邊很快就能聽到抱怨 我的顯示器上效果不太...