CSS3 of the Holy Grail Layout Calc and Flex

There are many ways to achieve the Grail layout.

Mostly with the help of padding, margin, float and the like, of course, this is the traditional way of implementation. More reference ways to the Holy Grail layout summary.

This is said to be implemented with CSS3 Cal and Flex, because CSS is limited, there are errors or mistakes, please note.

CSS3 Cal Support situation, overall 93%.

Support for flex layouts, overall 97%

To increase the complexity of

1. Spacing between blocks

2. With border

3. The Box-sizing:content-box is used

See Calc's implementation first

<! DOCTYPE html>"en">"UTF-8"> <meta name="Viewport"Content="Width=device-width, initial-scale=1"> <style>html, body {height: -%; Width: -%; Margin:0; padding:0; Box-sizing:border-box}. Header {background:red;        height:100px;            }. footer {height:100px;            Position:absolute; Bottom:0; Width: -%; Box-sizing:border-box; Background-color:palevioletred}. Header,. Footer,. Left,. Content,. Right {            border:10px solid black; Box-sizing:border-box}. Left {margin:20px0;            Background:green;        width:100px;            }. Content {margin:20px 20px; Background-Color:silver; Width:calc ( -% -240px); Width:-webkit-calc ( -% -240px); Width:-moz-cal ( -%-240px); }. Right {margin:20px0; Background-Color:yellow;        width:100px; }. Left,. Content,. Right {float: Left; Height:calc ( -% -240px); Height:-webkit-calc ( -% -240px); Height:-moz-cal ( -%-240px); }    </style>class="Header">header</div> <divclass=" Left">left</div> <divclass="content">content</div> <divclass=" Right">right</div> <divclass="Footer">footer</div></body>
Effect
Now see how flex is implemented
<! DOCTYPE html>"en">"UTF-8"> <meta name="Viewport"Content="Width=device-width, initial-scale=1"> <style>html, body {height: -%; Width: -%; Margin:0; padding:0} body {Display:flex; Flex-Direction:column;            }. header {height:100px;        background:red;            } #container {Display:flex; Flex:1 1Auto; margin:20px0; }. Left {background-Color:green; }. Right {background-Color:yellow; }. Content {flex:1 1Auto; Background-Color:silver; Margin:020px;                       }. footer {height:100px; Width: -%; Background-color:palevioletred}. Left,. Right {flex:0 0100px; }. Left,. Right,. Content,. Header,. footer {Box-sizing:border-box;        border:10px solid black; }    </style>class="Header">header</div> <div id='Container'> <divclass=" Left">left</div> <divclass="content">content</div> <divclass=" Right">right</div> </div> <divclass="Footer">footer</div></body>
Effect:
The effect is the same, all just pull the extension to fill automatically.
But when you remove the Box-sizing:border-box, you will find that Calc has broken down, but flex is still not chaotic.
That's why I love flex. There are so complex to calculate, sincere class, support is not high flex.
Am I still too young?
Reference:
Holy Grail Layout Summary
CSS3 of the Holy Grail Layout Calc and Flex