【质问阿里】既然「圣杯布局」有缺陷为什么要设计「双飞翼布局」而不是使用绝对定位

Question

大家都知道，「圣杯布局」和「双飞翼布局」都是为了解决经典三栏问题的优化方案，

因为「圣杯布局」存在宽度过小导致布局混乱的缺陷（如下图），阿里淘宝提出了「双飞翼布局」

以下是两个demo
「圣杯布局」：https://jsfiddle.net/zwwill/p...
「双飞翼布局」：https://jsfiddle.net/zwwill/5...

但是「双飞翼布局」增加了 DOM 树的层级，因此也会增加 浏览器渲染引擎构建布局树时的计算消耗，来看一下「双飞翼布局」的dom部分

<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">
            <div class="main-wrap">main</div>
        </div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>

个人任务，绝对定位即可解决此问题 https://jsfiddle.net/zwwill/a...
如下：

    <div class="header">header</div>
    <div class="wrapper">
        <div class="main col">
            main
        </div>
        <div class="left col">
            left
        </div>
        <div class="right col">
            right
        </div>
    </div>
    <div class="footer">footer</div>

.wrapper {
  position: relative; 
}
.main {
  margin:0 100px;
}
.left {
 position: absolute;
 left: 0;
 top: 0;
}
.right {
 position: absolute;
 right: 0;
 top: 0;
}

所以，请问

既然「圣杯布局」有缺陷为什么要设计「双飞翼布局」而不是使用绝对定位

Answer 1

应该有中间部分高度不确定，两边超过中间高度这种情况

Answer 2

666，一种界面，三种布局，感觉楼主的布局不错，最窄的情况也不会乱，fork了 顺便问下楼主，这个新的叫什么布局

Answer 3

https://jsfiddle.net/zwwill/a... 我觉得这样就能解决问题了。方法简单，兼容也还可以

---

此处做了总结
https://segmentfault.com/a/11...