百分比与圣杯布局

摘要：圣杯布局与双飞翼的比较项目实验在对百分比布局和圣杯布局有了一定了解以后，我呢写了一个将这两个联系在一起，没有，只有。

最近在开发一个简单的页面的时候，需要给页面去做一个布局，具体部分就是头部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都是自适应的，所以也不算真正的圣杯布局。我在这里的目的主要是为了使用圣杯布局中的中间先渲染的一个方法，以及设计一个解决圣杯布局中使用百分比的策略。