Detailed explanation of CSS's three-column holy grail layout scheme-CSS Tutorial-php.cn

Detailed explanation of CSS's three-column holy grail layout scheme

高洛峰

Release： 2017-03-09 17:03:43

Original

1781 people have browsed it

The Holy Grail layout has beautiful effects and has very low browser compatibility requirements. It is a very powerful three-column page layout solution. Next, let’s take a look at the complete analysis of the CSS three-column "Holy Grail Layout" solution:

The Holy Grail layout originated from an article written by Matthew Levine in 2006. Its DOM structure is as follows:

<p class="container">
    <p class="main"></p>
 <p class="sub"></p>
 <p class="extra"></p>
</p>

Copy after login

Process Explanation
Continue Next, let us implement the Holy Grail layout step by step;

1. First float the main, sub, and extra columns respectively, and then use negative margins to position the sub column and extra column to the left and right sides. The CSS code at this time is as follows:

.main {   
 float: left;   
 width: 100%;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.sub {   
 float: left;   
 width: 200px;   
 height: 300px;   
 margin-left: -100%;   
 background-color: rgba(0, 255, 0, .5);   
}   
.extra {   
 float: left;   
 width: 180px;   
 height: 300px;   
 margin-left: -180px;   
 background-color: rgba(0, 0, 255, .5);   
}

Copy after login

2. After completing the previous step, the sub and extra columns have reached the correct position, but the sub and extra columns cover both sides of the main. For The Holy Grail layout solution to this problem is to add left and right padding to the container so that the main column is positioned in the correct position.

.container {   
 padding-left: 210px;   
 padding-right: 190px;   
}

Copy after login

3. After completing the second step, a new problem appeared: the sub and extra columns were also affected by the left and right inner margins of the container and their positions moved. To solve this problem, Holy Grail Layout uses relative positioning to bring the sub and extra columns back to their correct positions. The newly added code is as follows:

.sub {   
 position: relative;   
 left: -210px;   
}   
.extra {   
 position: relative;   
 rightright: -190px;   
}

Copy after login

4. When the browser is reduced to a certain extent, this layout may be destroyed. This can be solved by adding the min-width attribute to the body. The final Holy Grail layout CSS code is as follows:

body {   
 min-width: 600px; /* 2*sub + extra */
}   
.container {   
 padding-left: 210px;   
 padding-right: 190px;   
}   
.main {   
 float: left;   
 width: 100%;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.sub {   
 position: relative;   
 left: -210px;   
 float: left;   
 width: 200px;   
 height: 300px;   
 margin-left: -100%;   
 background-color: rgba(0, 255, 0, .5);   
}   
.extra {   
 position: relative;   
 rightright: -190px;   
 float: left;   
 width: 180px;   
 height: 300px;   
 margin-left: -180px;   
 background-color: rgba(0, 0, 255, .5);   
}

Copy after login

Full example

The effect is as follows:
Detailed explanation of CSSs three-column holy grail layout scheme

The CSS and DOM code is as follows:

<!DOCTYPE html>   
<html>   
<head>   
    <meta charset="utf-8">   
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
    <title>圣杯布局</title>   

    <style type="text/css">   
    body {background-color: #ffffff; font-size:14px;}   
    #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}   
    .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}   
    .main {background-color: #03a9f4; color:#ffffff;}   
    .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}   
    p {margin:0; padding:20px; text-align: center;}   


    /* 左侧栏固定宽度，右侧自适应 */
    .bd-lft {   
        zoom:1;   
        overflow:hidden;   
        padding-left:210px;   
    }   
    .bd-lft .aside {   
        float:left;   
        width:200px;   
        margin-left:-100%; /*= -100%*/

        position:relative;   
        left:-210px; /* = -parantNode.paddingLeft */
        _left: 0; /*IE6 hack*/
    }   
    .bd-lft .main {   
        float:left;   
        width:100%;   
    }   


    /* 右侧栏固定宽度，左侧自适应 */
    .bd-rgt {   
        zoom:1;   
        overflow:hidden;   
        padding-right:210px;   
    }   
    .bd-rgt .aside {   
        float:left;   
        width:200px;   
        margin-left:-200px; /* = -this.width */

        position:relative;   
        rightright:-210px; /* = -parantNode.paddingRight */
    }   
    .bd-rgt .main {   
        float:left;   
        width:100%;   
    }   


    /* 左中右 三栏自适应 */
    .bd-3-lr {   
        zoom:1;   
        overflow:hidden;   
        padding-left:210px;   
        padding-right:210px;   
    }   
    .bd-3-lr .main {   
        float:left;   
        width:100%;   
    }   
    .bd-3-lr .aside-1 {   
        float: left;   
        width:200px;   
        margin-left: -100%;   

        position:relative;   
        left: -210px;   
        _left: 210px; /*IE6 hack*/
    }   
    .bd-3-lr .aside-2 {   
        float: left;   
        width:200px;   
        margin-left: -200px;   

        position:relative;   
        rightright: -210px;   
    }   

    /* 都在左边，右侧自适应 */
    .bd-3-ll {   
        zoom:1;   
        overflow:hidden;   
        padding-left:420px;   
    }   
    .bd-3-ll .main {   
        float:left;   
        width:100%;   
    }   
    .bd-3-ll .aside-1 {   
        float: left;   
        width:200px;   
        margin-left: -100%;   

        position:relative;   
        left: -420px;   
        _left: 0px; /*IE6 hack*/
    }   
    .bd-3-ll .aside-2 {   
        float: left;   
        width:200px;   
        margin-left: -100%;   

        position:relative;   
        left: -210px;   
        _left: 210px; /*IE6 hack*/
    }   

    /* 都在右边，左侧自适应 */
    .bd-3-rr {   
        zoom:1;   
        overflow:hidden;   
        padding-right:420px;   
    }   
    .bd-3-rr .main {   
        float:left;   
        width:100%;   
    }   
    .bd-3-rr .aside-1 {   
        float: left;   
        width:200px;   
        margin-left: -200px;   

        position:relative;   
        rightright: -210px;   
    }   
    .bd-3-rr .aside-2 {   
        float: left;   
        width:200px;   
        margin-left: -200px;   

        position:relative;   
        rightright: -420px;   
    }   


    </style>   

</head>   
<body>   

    <p id="hd">头部</p>   

    <p class="bd-lft">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside">   
            <p>侧边栏固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-rgt">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside">   
            <p>侧边栏固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-3-lr">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside-1">   
            <p>侧边栏1固定宽度</p>   
        </p>   

        <p class="aside-2">   
            <p>侧边栏2固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-3-ll">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside-1">   
            <p>侧边栏1固定宽度</p>   
        </p>   

        <p class="aside-2">   
            <p>侧边栏2固定宽度</p>   
        </p>   
    </p>   

    <p class="bd-3-rr">   
        <p class="main">   
            <p>主内容栏自适应宽度</p>   
        </p>   

        <p class="aside-1">   
            <p>侧边栏1固定宽度</p>   
        </p>   

        <p class="aside-2">   
            <p>侧边栏2固定宽度</p>   
        </p>   
    </p>   

    <p id="ft">底部</p>   

</body>   
</html>

Copy after login

The advantages of the Holy Grail layout are summarized as follows:
1. Make the main content column load first.
2. Allow any column to be the highest.
3. No extra p.
4. Very few hacks are required.

The above is the detailed content of Detailed explanation of CSS's three-column holy grail layout scheme. For more information, please follow other related articles on the PHP Chinese website!