CSS 布局系列（二）—— 圣杯布局

圣杯布局

圣杯布局是三栏（左中右）布局的一种，其中，左右两边固定宽度，中间的主体内容自适应。

为了行文方便，下面先定义一些公共代码：

HTML 结构：

<div class="container">
    <header>header</header>
    <main>
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </main>
    <footer>footer</footer>
</div>

公共样式：

*{
   
    margin: 0;
    padding: 0;
}
header,footer{
   
    height: 100px;
    background-color: #eeeeee;
}
main>div{