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

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

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

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

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

    

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

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

* {
    margin:0;
    padding; 0;
}

html, body {
    height: 100%;
}

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

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

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

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

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

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%以后，會(huì)擴(kuò)展頁(yè)面的高度10%，因?yàn)闀?huì)繼承父類高度100%

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

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

.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作為測(cè)驗(yàn)基準(zhǔn)），main部分寬度沒(méi)有錯(cuò)誤，仔細(xì)計(jì)算，發(fā)現(xiàn)left與right的寬度首先是基于100%計(jì)算的，在container使用padding=20%以后，中間部分變成了60%。

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

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

首先在這個(gè)實(shí)驗(yàn)中我使用的就是圣杯布局，那圣杯布局的優(yōu)勢(shì)在于中間是適應(yīng)的，通過(guò)中間的為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%
同時(shí)為了圣杯布局最后一步讓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é)果如下 此時(shí)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)也滿足，同時(shí)也滿足了圣杯布局方式和固定的20%和60%的占有比例。

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