圣杯布局

圣杯布局

所谓圣杯布局简单点来说就是三列布局，左右两列是固定宽度，中间是自适应宽度，然后上下加两个盖，如图下图所示:

圣杯布局

html代码如下

header

   

        

middel

        

left

        

right

    

    

footer

切记中间列需要放在第一个为位置

css代码如下

   body{

            padding: 0;

            margin: 0;

            min-width: 300px;

            height: 300px;

        }

        .contariner{

            padding:0 100px;

            height: 100%;

        }

        .column{

            float: left;

        }

        .left{

            width: 100px;

            height: 100%;

            margin-left: -100%;

            position: relative;

            right: 100px;

            background-color: aliceblue;

        }

        .right{

            width: 100px;

            height: 100%;

            margin-right: -100px;

            background-color:antiquewhite;

        }

        .center{

            /* flex: 1; */

            width: 100%;

            height: 100%;

            background-color: aqua;

        }

        .header{

            width: 100%;

            background-color: blueviolet;

        }

        .footer{

            width: 100%;

            background-color: brown;

        }

当然也可以使用弹性和布局实现以上效果，不过存在兼容性问题

html代码

        

left

        

middel

        

right

    

css代码

   .contariner{

            width: 100%;

            height: 100%;

            display: flex;

        }

        .left{

            width: 100px;

            height: 100%;

            background-color: aliceblue;

        }

        .right{

            width: 100px;

            background-color:antiquewhite;

        }

        .center{

            flex: 1;

            background-color: aqua;

        }