Three ways to achieve the Holy Grail layout

The Holy Grail is a very common layout css layout. Claim:

• The upper and lower each occupied all the width of the screen.
• Portion between the upper and lower portions is a three-column layout.
• Three-column layout on both sides of a constant width, the whole area of ​​the intermediate portion is automatically populated.
• The height of the middle part of the height of the area is the highest of three columns.

I will use three methods to achieve the Holy Grail layout, are floating, flexbox and css grid:

HTML content:

<div class="header">这里是头部</div>
<div class="container"> <div class="middle">中间部分</div> <div class="left">左边</div> <div class="right">右边</div> </div> <div class="footer">这里是底部</div>

float:

1. filling three columns

This step, first clear float to the bottom area, following the area to prevent the upper side of the float together.
Further: the, the left and right of the three regions is arranged floating. Region of about two to a constant width, the width of the intermediate portion is set to 100%.

Achieved down, because the floating relation, [Middle] will occupy all parts of [Container], and the two regions are pushed to the left and right below, however, since the first step in setting up a relationship padding, [Container] of each of the remaining one of the left and right regions, and the width of the area around the same.

.header,.footer{
    height:40px;
    width:100%; background:red; } .footer{ clear:both; } .container{ padding-left:200px; padding-right:300px; } .container div{ float:left; } .middle{ width:100%; background:yellow; } .left{ width:200px; background:pink; } .right{ width:300px; background:aqua; } 

2. Move the left area

The next thing is to be moved to the area about two vacated space within the margins go.

First move to the left, plus a new style margin-left: -100%. Thus, since the floating relation, moved to put the [Middle] on the left side of a left block, interwoven therewith, while the right-hand column automatically moves to the left. Then give an offset to the left column, which happens to be offset width, this step to give [Container] is set to the relative position

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{ postion:relative; float:left; } .middle{ width:100%; background:yellow; } .left{ width:200px; background:pink; margin-left:-100%; right:200px; } .right{ width:300px; background:aqua; }

3. Move to the right

As was the case-by-step principle, the right area also deceives up, and set itself the same width from negative outside on the line.

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{ postion:relative; float:left; } .middle{ width:100%; background:yellow; } .left{ width:200px; background:pink; margin-left:-100%; right:200px; } .right{ width:300px; background:aqua; margin-right:-300px; }

flexbox elastic box implementation:

Very simple, at the time of writing html, because they no longer relate to float just need to follow the order of the left-right to write it. A width of about two-coded region, the middle region of the flex attribute set to 1 on it.

.header,.footer{
    height:40px;
    width:100%; background:red; } .container{ display: flex; } .middle{ flex: 1; background:yellow; } .left{ width:200px; background:pink; } .right{ background: aqua; width:300px; }

css grid grid

grid is a new layout, as of the beginning of 2018, the vast majority of browsers already support css grid.
The principle is the area of the page is divided into a grid of one, just like the Go board.

The Holy Grail to solve the problem with the grid, need extra add a [container] of the problem you can get rid of the elastic box, which is the left-right three areas do not require an extra div in packaging them outside.

body{
    display: grid;
}
#header{
    background: red;
    grid-row:1; grid-column:1/5; } #left{ grid-row:2; grid-column:1/2; background: orange; } #right{ grid-row:2; grid-column:4/5; background: cadetblue; } #middle{ grid-row:2; grid-column:2/4; background: rebeccapurple } #footer{ background: gold; grid-row:3; grid-column:1/5; }

That grid-row from top to bottom, # header occupies the first cell, # left, # middle, # right to occupy the second lattice, # footer occupy the third grid.

And grid-column represent, from left to right in the lateral direction, is divided into five spaces. Which #header and #footer occupy all. #left occupy the first grid, # middle occupy the second to the fourth grid, # right to occupy the fifth grid.