圣杯布局

by 亮 薛

HTML

圣杯布局
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <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 100px 0 100px; color:#fff;}
.col{position: relative;float: left;}
.header {height: 50px;background-color: #666;color:#fff;}
.main {width: 100%;height: 200px;background-color: #555;}
.left {width: 100px;height: 200px;margin-left: -100%;left: -100px;background-color: #999;}
.right {width: 100px;height: 200px;margin-left: -100px;right: -100px;background-color: #999;}
.footer {height: 50px;background-color: #666; color:#fff;}
.clearfix::after{content: "";display:block;clear:both;visibility:hidden;height:0;overflow:hidden;}