Xpress front-end record --------- HTML5 + CSS Series 9.0

------- Holy Grail classic layout layout

　　The Holy Grail layout is a layout of the conceptual model Kevin Cornell proposed in 2006, at the earliest to improve the Taobao UED engineer (legend Yu Bo) and spread, in China there it is called Flying wing layout, its layout requirements there are several:

　　1. The layout of three, intermediate width adaptive, fixed width on both sides;

　　2. The middle column shows the priority to be rendered in the browser;

　　3. Allow the maximum height of any column; Holy Grail layout as layout requirements and Flying wing

　　The following two methods will be used, as shown in FIG effect

 

　　A method to realize: Floating

　　

<div class="header">
    <h4>header</h4>
</div>

<div class="container">
    <div class="middle">
        <h4>middle</h4>
        <p>middle-content</p>
    </div>
    
    <div class="left">
        <h4>left</h4>
        <p>left-content</p>
    </div>
    
    <div class="right">
        <h4>right</h4>
        <p>right-content</p>
    </div>
</div>

<div class="footer">
    <h4>footer</h4>
</div>

.header, .footer {
    border: 1px solid #333;
    background: #ccc;
    text-align: center;
}
.footer {
    clear: both;
}

.container {
    padding:0 220px 0 200px;
    overflow: hidden;
}
.left, .middle, .right {
    position: relative;
    float: left;
    min-height: 130px;
}
.middle {
   width: 100%;
    background: blue;
}
.left {
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background: red;
}
.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: green;
}

　　The basic idea:

• In html, define good header and footer styles, so that the transverse stays full.
• In the container of three to floating and relative positioning (it will be used later), middle to be on the front, footer clear float.
• Right and left two columns of three fixed-width 200px and 220px, middle portion disposed intermediate support full 100%. (While the width may be arbitrarily set)
• Such as floating relationship, middle will occupy the entire container, about two regions pushed down
• Next, set the left  margin-left: -100%;, so left back row far left
• But it will cover to the middle, so when provided to the outer container  padding: 0 220px 0 200px;, to the left position vacated
• In this case no left and the far left, as has been previously set through the relative positioning, so that by  left: -200px; the leftmost left back
• Similarly, for the right region, provided  margin-left: -220px; the first row right back
• In this case an empty space on the right side of 220px, the final set `right: -220px; ## pulled to the right of the right region on the line.

 

　　Two implementations: flex elastically box

　　

<div class="header">
    <h4>header</h4>
</div>

<div class="container">
    <div class="left">
        <h4>left</h4>
        <p>left-content</p>
    </div>
    
    <div class="middle">
        <h4>middle</h4>
        <p>middle-content</p>
    </div>
    
    <div class="right">
        <h4>right</h4>
        <p>right-content</p>
    </div>
</div>

<div class="footer">
    <h4>footer</h4>
</div>

.header, .footer {
    border: 1px solid #333;
    background: #ccc;
    text-align: center;
}

.container {
    display: flex;
}
.left {
    width: 200px;
    background: red;
}
.middle {
    flex: 1;
    background: blue;
}
.right {
    width: 220px;
    background: green;
}

　　The basic idea:　

• header and footer with the above, the lateral support full. footer do not have to clear the floating
• The container left, middle, right turn can be arranged without intentionally placed into the front middle
• To the container elastic layout display: flex;
• wide left and right given region, middle setting  flex: 1; to

 

　　Reference to: https://segmentfault.com/a/1190000017540629#item-4