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

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

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

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

在給wrapper設(shè)置寬度和高度的時候，如下，在設(shè)置height為100%的時候，發(fā)現(xiàn)css不起作用。

    

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

這里主要是因?yàn)闆]有在wrapper的父類設(shè)置明確的高度定義。這里如果需要讓100%起作用，需要將wrapper的各個父類都設(shè)置高度為100%；

* {
    margin:0;
    padding; 0;
}

html, body {
    height: 100%;
}

對于圣杯布局和雙飛翼布局，如果是做前端有了一定基礎(chǔ)以后，應(yīng)該經(jīng)常聽到這兩種布局，兩者都是針對于三欄布局設(shè)計(jì)的，是網(wǎng)站開發(fā)中很不錯的布局選擇。

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

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

這里我主要是為了百分比練習(xí)的，里面有很多一些強(qiáng)制性的內(nèi)容，比如不能使用px，在核心內(nèi)容區(qū)域只能使用圣杯布局（這也是為了圣杯布局擁有的優(yōu)勢想體現(xiàn)出來）。

首先頁面分為上下兩塊，上面為頭部header，下面為container，需要占有整個屏幕。在contianer里面需要使用百分比的圣杯布局，兩側(cè)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%; 
        這里設(shè)置了100%以后，會擴(kuò)展頁面的高度10%，因?yàn)闀^承父類高度100%

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

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

.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;
}

結(jié)果如下

這里發(fā)現(xiàn)left和right的寬度不再是20%，而是12%（這里基于寬度1000px作為測驗(yàn)基準(zhǔn)），main部分寬度沒有錯誤，仔細(xì)計(jì)算，發(fā)現(xiàn)left與right的寬度首先是基于100%計(jì)算的，在container使用padding=20%以后，中間部分變成了60%。

可是百分比不是基于父類寬度進(jìn)行計(jì)算的么，這里的父類contianer的寬度依然是1000px(100%)，這里需要了解盒子模型以及百分比繼承的屬性width了，width我個人理解是對于一個塊中可是區(qū)域的寬度，在沒有設(shè)置border-box屬性，塊的寬度是width+border+padding。所以設(shè)置了padding，container可視區(qū)域?yàn)?0%，此時main依然為100%60%=60%，但是對于left與right為20%60%=12%，所以在后面使用position定位到-20%，無法回到剛開始的位置，因?yàn)楸旧淼膶挾纫呀?jīng)改變了。同時因?yàn)閜osition中的left屬性是繼承父類的width的，所以這里再次設(shè)置left為20%也不會滿足條件。

那如果為了滿足left與right寬度不改變，依然為20%，應(yīng)該怎么做呢？

首先在這個實(shí)驗(yàn)中我使用的就是圣杯布局，那圣杯布局的優(yōu)勢在于中間是適應(yīng)的，通過中間的為60%的寬度。那既然中間是自適應(yīng)的，那我可以使用函數(shù)進(jìn)行計(jì)算，然后求解left-right的寬度與padding。

假設(shè)padding-left與padding-right為z百分點(diǎn)，設(shè)置left和right的初始寬度為y，設(shè)置最終left與right的寬度為W(這里是20%)

所以公式為 （1-2z） y = W = 20%
同時為了圣杯布局最后一步讓left塊重新到最左邊，這里的 z 的值應(yīng)該就是20%

所以最后求的的結(jié)果就是y = 1/3 也就是 33.333333% z = 20%
設(shè)置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;
}

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

最后再設(shè)置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;
}

結(jié)果如下

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

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