css中圣杯布局和双飞翼布局的介绍（附代码）

圣杯布局（flexbox实现）

<div id="HolyGrail">
 <div id="header">#header</div>

 <div id="container">
 <div id="center" class="column">#center</div>
 <div id="left" class="column">#left</div>
 <div id="right" class="column">#right</div>
 </div>

 <div id="footer">#footer</div>

 body {
 min-width: 550px; 
 }
 #HolyGrail {
 display: flex;
 min-height: 100vh;
 flex-direction: column;
 }
 #container {
 display: flex;
 flex: 1;
 }
 #center {
 background-color: #e9e9e9;
 flex: 1;
 }
 #left {
 background-color: red;
 order: -1;
 width: 150px;
 }
 #right {
 background-color: blue;
 width: 150px;
 }
 #header, 
 #footer {
 height: 50px;
 background-color: #c9c9c9;
 }

如果不考虑ie10及以下的浏览器，那么可以使用flex来实现圣杯布局。而且圣杯布局可以通过让container填充高度来使得footer达到一个sticky的效果。
flex兼容性

双飞翼布局

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏p并排，以形成三栏布局。不同的地方在于解决中间p内容不被遮挡的思路上面

1. 圣杯布局的为了中间内容不被修改，是通过包裹元素的padding-left和padding-right来使得内容p置于中间，然后再通过相对定位position:relative，配合right或left属性让左右两栏不则当中间内容。

2. 双飞翼布局的解决方案是：通过再中间元素的内部新增一个p用于放置内容，然后通过左右外边距margin-left和margin-right为左右两栏留出位置。

3. 双飞翼布局多了1个p标签，少用了4个css属性。少用了padding-left，padding-right，左右两个p用相对布局position: relative及对应的right和left，多了margin-left，margin-right。

<div id="header">#header</div>

 <div id="container">
 <div id="center" class="column">
 <div id="center-content">#center</div>
 </div>
 <div id="left" class="column">#left</div>
 <div id="right" class="column">#right</div>
 </div>

 <div id="footer">#footer</div>

 body {
 min-width: 500px; 
 }
 #container {
 overflow: auto; /* BFC */
 }
 #container .column {
 height: 200px;
 float: left;
 }
 #center {
 background-color: #e9e9e9;
 width: 100%;
 }
 #center-content {
 margin-left: 180px;
 margin-right: 150px;
 } 
 #left {
 width: 180px;
 background-color: red;
 margin-left: -100%;
 }
 #right {
 background-color: blue;
 width: 150px; 
 margin-left: -150px; 
 }

 #header, 
 #footer {
 background-color: #c9c9c9;
 }

相关文章推荐：

css中如何实现浮动的元素换行

CSS中Grid布局的用法总结(附代码)