圣杯布局[绝对定位版]

by 亮 薛

HTML

我认为的布局
    <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>

CSS

.wrapper {padding: 0; color:#fff;position: relative;}
.header {height: 50px;background-color: #666;color:#fff;}
.main {height: 200px;background-color: #555;
  margin:0 100px;
}
.left {width: 100px;height: 200px;background-color: #999;
 position: absolute;
 left: 0;
 top: 0;
}
.right {width: 100px;height: 200px;background-color: #999;
 position: absolute;
 right: 0;
 top: 0;
}
.footer {height: 50px;background-color: #666; color:#fff;}
.clearfix::after{content: "";display:block;clear:both;visibility:hidden;height:0;overflow:hidden;}