两侧定宽，中间自适应布局

如题所示，实现一个网页左右两栏定宽，中间宽度自适应的布局。

1. 圣杯布局

思路：
两侧中间设置左浮动，两侧定宽，中间宽度100%,左侧左外边距为-100%，右侧左外边距为-自身宽度。
父级左右内边距为定宽宽度，左右两侧设置相对定位，左侧偏移原来位置到左边，右侧偏移原来位置到右边(防止中间内容被覆盖)

// index.html
<header>头部</header>
<div class="container">
    <div class="center">主区域</div>
    <div class="left">左区域</div>
    <div class="right">右区域</div>
</div>
<footer>底部</footer>

// index.css
.container{
    padding: 0 300px;
    overflow: hidden;    //防止高度坍塌
}
.left{
    width: 300px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -300px;
}
.center{
    width: 100%;
    float: left;
}
.right{
    width: 300px;
    float: left;
    margin-left: -300px;
    position: relative;
    right: -300px;
}

2. 双飞翼布局

思路：
左中右设置左浮动，左右两侧定宽，中间宽度100%，左侧左外边距-100%，右侧左外边距-自身宽度。
底部设置clear:both; 触发BFC解决高度坍塌。
解决问题（中间内容被左右两侧覆盖）：
中间内容增加一个子元素center，设置margin: 0 定宽。（即内容放在center里）

// index.html
    <div class="header">头部</div>
    <div class="wrapper">
        <div class="center">主区域</div>
    </div>
    <div class="left">左区域</div>
    <div class="right">右区域</div>
    <div class="footer">底部</div>

.wrapper{
    float: left;
    width: 100%;
}
.center{
    margin: 0 200px;
}
.left{
    float: left;
    width: 200px;
    margin-left: -100%;
}
.right{
    float: left;
    width: 200px;
    margin-left: -200px;
}
.footer{
    clear: both;
}

圣杯布局和双飞翼布局的区别：
解决中间内容被覆盖、高度坍塌的方法不同。

3. flex

思路：
父容器设置flex布局，两侧定宽，中间区域设置flex：1，表示均分剩余宽度。

    <div class="container">
        <div class="left">左区域</div>
        <div class="center">主区域</div>
        <div class="right">右区域</div>
    </div>

.container{
    height: 500px;
    display: flex;
}
.left{
    width: 100px; 
 }
.center{
    flex: 1;
}
.right{
    width: 200px;
}

4. grid

思路：
父容器设置grid布局，设定每行每列排列方式，设置网格区域分布，指定子元素网格区域。

    <div class="container">
        <div class="header">头部</div>
        <div class="left">左区域</div>
        <div class="center">主区域</div>
        <div class="right">右区域</div>
        <div class="footer">底部</div>
    </div>

.container{
    height: 500px;
    display: grid;
    grid-template-columns: 100px auto 200px;   // 三列，每列宽度
    grid-template-rows: 80px auto 80px;    // 三行，每行高度
    grid-template-areas:
        "header header header"
        "leftside main rightside"
        "footer footer footer"
}
.header{
    grid-area: header;
}
.left{
    grid-area: leftside;
}
.center{
    grid-area: main;
}
.right{
    grid-area: rightside;
}
.footer{
    grid-area: footer;
}

5. table

思路：
父容器设置table布局，设置宽高。左中右设置table-cell，左右定宽。

    <div class="container">
        <div class="left">左区域</div>
        <div class="center">主区域</div>
        <div class="right">右区域</div>
    </div>

.container{
    display: table;
    width: 100%;
    height: 500px;
}
.left{
    display: table-cell;
    width: 100px;
}
.center{
    display: table-cell;
}
.right{
    display: table-cell;
    width: 200px;
}

6. position

思路：
子绝父相。
父容器相对定位，左右定宽定高绝对定位，top0，left/right0。中间定高，设置左右外边距。
缺点： 脱离文档流

    <div class="container">
        <div class="left">左区域</div>
        <div class="center">主区域</div>
        <div class="right">右区域</div>
    </div>

.container{
    position: relative;
}
.left{
    position: absolute;
    width: 100px;
    height: 500px;
    left: 0;
    top: 0;
}
.center{
    height: 500px;
    margin-left: 100px;
    margin-right: 200px;
}
.right{
    position: absolute;
    width: 200px;
    height: 500px;
    right: 0;
    top: 0;
}

注：解决父元素高度坍塌

解法一：

.parent{
    overflow: hidden;
}

解法二：

.parent::after{
    clear: both;
    content: "";
    display: block;
}