摘要：圣杯布局與雙飛翼的比較項目實驗在對百分比布局和圣杯布局有了一定了解以后，我呢寫了一個將這兩個聯系在一起，沒有，只有。

最近在開發一個簡單的頁面的時候，需要給頁面去做一個布局，具體部分就是頭部header和內容區域。這里有一個要求就是頭部定好寬度以后，需要讓container占有整個屏幕，那最好的辦法就是直接計算頁面的高度，然后減去header的高度，即可得到container的高度。可是，這樣需要js去計算瀏覽器寬高度，感覺有點麻煩，然后也在想有沒有更好的辦法。

對于一些國外網站，比較常見的就是百分比布局的方式。那針對于這個頁面，body為真個頁面高度，那header占有了一部分，剩下的直接用百分比表示不就可以啦。

百分比值是一種相對值，任何時候要分析它的效果，都需要正確找到它的參照。

在給wrapper設置寬度和高度的時候，如下，在設置height為100%的時候，發現css不起作用。

    

    .wrapper {
        width: 100%;
        height: 100%
    }

這里主要是因為沒有在wrapper的父類設置明確的高度定義。這里如果需要讓100%起作用，需要將wrapper的各個父類都設置高度為100%；

* {
    margin:0;
    padding; 0;
}

html, body {
    height: 100%;
}

對于圣杯布局和雙飛翼布局，如果是做前端有了一定基礎以后，應該經常聽到這兩種布局，兩者都是針對于三欄布局設計的，是網站開發中很不錯的布局選擇。

針對于圣杯布局和雙飛翼布局，網上有很多介紹，這里給出一個鏈接，也是我認為寫的比較不錯的一篇文章吧。圣杯布局與雙飛翼的比較

在對百分比布局和圣杯布局有了一定了解以后，我呢寫了一個demo將這兩個聯系在一起，沒有px，只有%。

這里我主要是為了百分比練習的，里面有很多一些強制性的內容，比如不能使用px，在核心內容區域只能使用圣杯布局（這也是為了圣杯布局擁有的優勢想體現出來）。

首先頁面分為上下兩塊，上面為頭部header，下面為container，需要占有整個屏幕。在contianer里面需要使用百分比的圣杯布局，兩側left與right都是占有20%的寬度，中間需要占有60%的寬度，頁面布局如下：

index.html

    
    
    
    
    


    

        

        

            
Main
            
Left
            
Right
        
    

style.css

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html, body, .fullpage {
    height: 100%;
}

.fullpage {
    width: 100%;
    /* background: lightblue; */
}

.header {
    height: 10%;
    background: lightslategray;
}

.container {
    /* 
        height: 100%; 
        這里設置了100%以后，會擴展頁面的高度10%，因為會繼承父類高度100%

        下面使用90%以后完全就不是問題啦，就是占有整個屏幕
    */
    height: 90%;
    padding: 0 20%;
}

/* 
    接下來需要設置整個屏幕核心部分，那就是使用雙飛翼和圣杯布局
*/

.middle,
.left,
.right {
    float: left;
}

.middle {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: lightgreen;
}

.left {
    position: relative;
    left: -20%;
    width: 20%;
    height: 100%;
    margin-left: -100%;
    background: lightpink;
}

.right {
    position: relative;
    right: -20%;
    width: 20%;
    height: 100%;
    margin-left: -20%;
    background: lightseagreen;
}

結果如下

這里發現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 {
    position: relative;
    /* left: -33.333333%; */
    left: -20%;
    /* width: 20%; */
    width: 33.333333%;
    height: 100%;
    margin-left: -100%;
    background: lightpink;
}

.right {
    position: relative;
    /* right: -50%; */
    right: -20%;
    /* width: 20%; */
    width: 33.333333%;
    height: 100%;
    margin-left: -33.333333%;
    background: lightseagreen;
}

結果如下 此時left與right的寬度為20%（200px）

最后再設置position的left與right的值

.left {
    position: relative;
    left: -33.333333%;
    /* left: -20%; */
    /* width: 20%; */
    width: 33.333333%;
    height: 100%;
    margin-left: -100%;
    background: lightpink;
}

.right {
    position: relative;
    right: -33.333333%;
    /* right: -20%; */
    /* width: 20%; */
    width: 33.333333%;
    height: 100%;
    margin-left: -33.333333%;
    background: lightseagreen;
}

結果如下

demo完成，最后的自適應也滿足，同時也滿足了圣杯布局方式和固定的20%和60%的占有比例。

這里我確實有點過于追求百分比布局，圣杯布局本來就是兩側定寬，中間自適應，而我這里三個div都是自適應的，所以也不算真正的圣杯布局。我在這里的目的主要是為了使用圣杯布局中的中間先渲染的一個方法，以及設計一個解決圣杯布局中使用百分比的策略。