1. The Holy Grail Layout
The header and footer each occupy the entire width of the screen, and the height is fixed.
The middle container is a three-column layout.
The width of the two sides of the three-column layout is fixed, and the middle part automatically fills the entire area.
The height of the middle part is the height of the highest area in the three columns.
- float+position:relative
(1) The header and footer are horizontally full.
(2) The three columns in the container are set to float and relative positioning, the middle is placed at the top, and the footer clears the float.
(3) The left and right columns of the three columns have fixed widths of 200px and 150px respectively, and the middle is set to 100% full. Due to floating, the middle will occupy the entire container, and the left and right areas will be squeezed down.
(4) Set the left margin-left : -100%;, let left return to the leftmost side of the previous line, but this will cover the center, so at this time, set padding-left: 200px; padding-right: 150px; for the outer container, and give left Vacant position with right
(5) At this time, left is not on the leftmost side, because the relative positioning has been set before, so pull left back to the leftmost side by left: -200px;
(6) For the right area, set margin- left: -150px; Pull right back to the first line, and there is 150px space on the right, so finally set right: -150px; to pull the right area to the far right.
<style type="text/css">
.header,.footer{
height: 50px;
background-color: #ccc;
text-align: center;
}
.container{
padding: 0 200px 0 150px;
overflow: hidden;
}
.column{
position: relative;
float: left;
text-align: center;
height: 300px;
line-height: 300px;
}
.middle{
width: 100%;
background-color: aquamarine;
}
.left{
width: 200px;
right: 200px;
margin-left: -100%;
background-color: bisque;
}
.right{
width: 150px;
margin-left: -150px;
background-color: bisque;
right: -150px;
}
.footer{
clear: both;
}
</style>
<div class="header">header</div>
<div class="container">
<div class="middle column">middle</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div>
<div class="footer">footer</div>
- flex flexible box
Set the flexible layout of the container: display: flex;
fixed width for left and right area, middle set flex: 1
<style type="text/css">
.header,.footer{
background-color: #CCCCCC;
text-align: center;
height: 60px;
line-height: 60px;
}
.container{
display: flex;
}
.column{
text-align: center;
height: 300px;
line-height: 300px;
}
.middle{
flex: 1;
background-color: #FFE4C4;
}
.left{
width: 200px;
background-color: aquamarine;
}
.right{
width: 150px;
background-color: aquamarine;
}
</style>
<div class="header">header</div>
<div class="container">
<div class="left column">left</div>
<div class="middle column">middle</div>
<div class="right column">right</div>
</div>
<div class="footer">footer</div>
- Grid layout
(1) Add display: grid to the body element; the property becomes a grid (grid)
(2) Set grid-row: 1; and grid-column: 1/5; for the header element, which means to occupy the first row The grid starts with the first column grid line and ends with the fifth column grid line...and so on
<style type="text/css">
body{
display: grid;
}
.header,.footer{
background-color: #CCCCCC;
text-align: center;
height: 60px;
line-height: 60px;
}
.header{
grid-row: 1;
grid-column: 1/5;
}
.footer{
grid-row: 3;
grid-column: 1/5;
}
.column{
text-align: center;
height: 300px;
line-height: 300px;
}
.left{
grid-row: 2;
grid-column: 1/2;
background-color: aquamarine;
}
.middle{
grid-row: 2;
grid-column: 2/4;
background-color: #FFE4C4;
}
.right{
grid-row: 2;
grid-column: 4/5;
background-color: aquamarine;
}
</style>
<div class="header">header</div>
<div class="container">
<div class="left column">left</div>
<div class="middle column">middle</div>
<div class="right column">right</div>
</div>
<div class="footer">footer</div>
2. Double wings layout
The header and footer each occupy the entire width of the screen, and the height is fixed.
The middle container is a three-column layout.
The width of the two sides of the three-column layout is fixed, and the middle part automatically fills the entire area.
The height of the middle part is the height of the highest area in the three columns.
(1) Left, main, and right are all set to float left
(2) Set the center width to 100%
(3) Set the negative margin, left set the negative margin to 100%, right set the negative margin to its own width
(4 ) Set the margin value of content to leave space for the left and right sidebars, and the margin value size is left and right width
<style type="text/css">
.header,.footer{
background-color: #CCCCCC;
text-align: center;
height: 60px;
line-height: 60px;
}
.container{
overflow: hidden;
}
.column{
text-align: center;
height: 300px;
line-height: 300px;
}
.left,.right,.main{
float: left;
}
.main{
width: 100%;
background-color: #FFE4C4;
}
.left{
width: 200px;
margin-left: -100%;
background-color: aquamarine;
}
.right{
width: 150px;
margin-left: -150px;
background-color: aquamarine;
}
.middle{
margin: 0 150px 0 200px;
}
</style>
<div class="header">header</div>
<div class="container">
<div class="main column">
<div class="middle">middle</div>
</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div>
<div class="footer">footer</div>
3. The difference between the Holy Grail and Double Flying Wings
-
Holy Grail layout, in order to prevent the content of the middle div from being occluded, after setting the left and right padding-left and padding-right of the middle div, use the relative layout position: relative for the left and right divs and match the right and left attributes respectively, so that the left and right divs Do not block the middle div after moving.
-
In the double flying wing layout, in order to prevent the content of the middle div from being obscured, a subdiv is directly created inside the middle div to place the content, and margin-left and margin-right are used in the subdiv to set aside positions for the left and right column divs.
1 more div, less about 4 css attributes (divpadding-left and padding-right in the middle of the holy grail layout, plus the left and right divs use relative layout position: relative and the corresponding right and left, a total of 4 There are 6 attributes in total; while the margin-left and margin-right 2 attributes are used in the subdiv of the Shuangfeiyi layout, 6-2=4), which feels a bit more direct and concise than the Holy Grail layout idea. -
To put it simply, the "Double Flying Wings" layout creates one more div than the Holy Grail layout, but there is no need for relative layout.