今天我们来总结一下日常设计页面布局时常用的网页左右两栏定宽，中间自适应宽度的布局方法有哪些。

1. 圣杯布局

首先这种布局适用于以下这种 html 中：

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

对于这类夹层的页面，我们可以设置左中右元素都向左浮动，其中中间宽度设置为 100%，左右都定宽，并且让左侧左外边距为 -100%，右侧左外边距为 -自身宽度；

并且让父元素的左右内边距都设置为定宽，左右两侧相对定位：

.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. 双飞翼布局

如果容器只包含了中间区域：

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

那么就可以考虑左中右都设置左浮动，两侧定宽，中间宽度 100%，并且让左侧左外边距为 -100%，右侧左外边距为 -自身宽度，这与圣杯布局类似；

不同点在于，双飞翼布局需要在底部设置 clear: both，这样就可以出发块级格式化上下文而避免高度坍塌：

.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 布局是我们做页面设计最常用的布局之一，对于如下简单的 html 元素：

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

我们只需要让父容器设置 flex 布局，两侧定宽，中间 flex: 1 即可：

.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 我们也比较少用，其相当于原始版本的 grid，应用场景跟 grid 布局一样，我们只需要在父容器中设置 table 布局，并且给出指定的宽高，再在左中右设置相应的 table-cell 并定宽即可：

.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 定位

除了表格方法，还可以利用 position 调整定位，我们只需要将子元素绝对定位，父元素相对定位，并且左右定宽定高，让 top: 0, left: 0, right: 0，并且让中间定高，设置左右外边距即可：

.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;
}

总结

以上就是我们日常会用到的布局形式，本文参考了 Avido 的《两侧定宽，中间自适应布局》，感兴趣的朋友也可以查看原链接。

前端基础知识之 CSS 两侧定宽，中间自适应布局