圣杯布局 position absolute

使用 position absolute 创建 圣杯布局

by Boyanliuu

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>圣杯布局</title>
    </head>
    <body>
        <header> header</header>
        <div class="clearfix wrapper">

            <div class="left">
                Left content
            </div>

            <div class="right">
                right content
            </div>
           <div class="center">
                Main     
            </div>
        </div>
        <footer> footer</footer>
    </body>
</html>

CSS

:root {
     box-sizing: border-box;
}
 *, ::before, ::after {
     box-sizing: inherit;
     margin: 0;
     padding: 0;
}
 .center{
     background:lightblue;
}
 .left{
     background:gold;
}
 .right{
     background:yellow;
}
 footer , header{
     background:CornflowerBlue;
}
 .wrapper{
     position:relative;
     min-height:1.2rem;
}
 .wrapper>div{
     position:absolute;
}
 .center {
     left: 200px;
     right: 200px;
}
 .left {
     left: 0;
     width: 200px;
}
 .right {
     right: 0;
     width: 200px;
}