两边宽度固定、中间自适应布局的解决方案

趁有时间，整理一下，做个笔记！
前端面试的时候关于布局方面通常会问这样一个问题：假设已知高度，完成三栏布局，两边栏定宽，中间栏自适应宽度。
当然还有同样类型的题，如上中下三栏，上下固定高，中间栏自适应，这种也是很常见的布局类型。还有两栏的布局，左边固定宽，右边自适应，反过来的情况等等，此处不讨论。

左中右三栏布局

1 浮动方式

css代码

 .parent{width: 100%;height: 200px;text-align: center;}
 .left {float: left;width: 300px;height: inherit;background: yellow;}
 .right{float: right;width: 300px;height: inherit;background: pink;}
 .center{height: inherit;background: #ff362a;}

html代码

<div class="parent">
   <div class="left">左边固定宽度盒子(左浮动)</div>
   <div class="right">右边固定宽度盒子(右浮动)</div>
   <div class="center">中间宽度自适应盒子(宽度不写且不浮动)</div>
</div>

外面套一个大盒子（width: 100%，高度固定），里面是三个小盒子。注意三个盒子的顺序，前两个是放左右两个盒子，一个左浮动一个右浮动，他们都脱标不占位置，所以第三个盒子（中间盒子，在标准流中）就能跑到它们两个下面，没有写宽则宽默认为100%，事实上左右两个盒子此时是有压住部分的中间盒子的（可以通过给第三个盒子加相对定位看到第三个盒子的全貌，此时左右盒子被压在下面，这里不写，感兴趣的可以试一下）。

效果展示：

2 定位方式

css代码

.parent {
    position: relative;
    width: 100%;
    height: 200px;
    text-align: center;
}
.left {
    width: 300px;
    height: 200px;
    position: absolute;
    background: yellow;
}
.right {
    width: 300px;
    height: 200px;
    position: absolute;
    right: 0;
    background: pink;
}
.center {
    height: 200px;
    position: absolute;
    left: 300px;
    right: 300px;
    background: red;
}

html代码

<div class="parent">
    <div class="left">左边固定宽度盒子(absolute)</div>
    <div class="right">右边固定宽度盒子(absolute)</div>
    <div class="center">中间宽度自适应盒子(宽度不写且absolute)</div>
</div>

外面套一个相对定位的大盒子（width: 100%，高度固定），里面是三个绝对定位的小盒子，其中左(默认left:0)、右(right: 0;)两边的绝对定位的盒子设置宽度固定，中间盒子也绝对定位，并设置left: 300px; right: 300px;，此时三个盒子都不占位置且并排站，谁都不压谁。
效果展示：

3 flex弹性布局方式

.parent {
    width: 100%;
    height: 200px;
    display: flex;
    text-align: center;
}
.left {
    width: 300px;
    background: yellow;
}
.center {
    flex: 1;
    background:red;
}
.right {
    width: 300px;
    background:pink;
}

<div class="parent">
    <div class="left">左边盒子宽度固定</div>
    <div class="center">中间盒子 flex: 1; 实现自适应</div>
    <div class="right">右边盒子宽度固定</div>
</div>

外面套一个伸缩的大盒子（width: 100%，高度固定），左右盒子宽度固定、中间盒子设置flex: 1;，此方法最简单。注意此时的三个盒子顺序是 左 中 右 ，和上面两种的 左 右 中 顺序不同

4 table表格布局方式

.parent {
    display: table;
    width: 100%;
    height: 200px;
    text-align: center;
}
.parent > *{
    /*height: 200px;*//*高会继承，其实不用写*/
    display: table-cell;
}
.left {
    width: 300px;
    background: yellow;
}
.center {
    background: red;
}
.right {
    width: 300px;
    background: pink;
}

<div class="parent">
    <div class="left">左边盒子宽度固定（table-cell）</div>
    <div class="center">中间盒子什么都不写实现自适应（table-cell）</div>
    <div class="right">右边盒子宽度固定（table-cell）</div>
</div>

外面大盒子设为display: table;（其中width: 100%，高度固定），然后下面三个盒子设置为display: table-cell;，接下来设置左、右盒子的宽度即可，中间盒子不用设置。

5 grid网格布局方式

.parent {
    width: 100%;
    /*height: 200px;*/
    display: grid;
    grid-template-rows: 200px; /*行的高度 也可以直接如上写高度*/
    grid-template-columns: 300px auto 300px; /*列的宽度*/
    text-align: center;
}
.left {
    background: yellow;
}
.center {
    background: red;
}
.right {
    background: pink;
}

<div class="parent">
    <div class="left">左边盒子</div>
    <div class="center">中间实现自适应</div>
    <div class="right">右边盒子</div>
</div>

三个盒子共同的父元素宽100%、高固定，然后对其设置display: grid; grid-template-columns: 300px auto 300px;，则下面的三个盒子直接自己就实现了左右定宽、中间自适应的形式

上中下三栏布局

上中下三栏，上下高固定、中间的高自适应：

1 中间盒子高100%、上下定位方式

设置中间盒子高100%，并设置其padding-top、padding-bottom分别为上下两个盒子固定的高，接下来写上下两个盒子，使他们绝对定位，定位到最上和最下即可；

2 定位方式

*{
    margin: 0;
    padding: 0;
}
.parent {
    /*width: 100%;*/
    /*height: 100%;*/
    width: 100vw;
    height: 100vh;
    position: relative;
    text-align: center;
}
.top {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    background: yellow;
}
.center {
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 50px;
    background: red;
}
.bottom {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    background: pink;
}

<div class="parent">
    <div class="top">上面盒子</div>
    <div class="center">中间盒子高度实现自适应</div>
    <div class="bottom">下面盒子</div>
</div>

外面套一个相对定位的大盒子（width: 100vw; height: 100vh;），里面是三个绝对定位的小盒子，其中上(默认top: 0;)、右(bottom: 0;)两边的绝对定位的盒子设置宽度固定为50，中间盒子也绝对定位，并设置top: 50px; bottom: 50px;

3 flex弹性布局方式

css代码如下，html及图片和2中的一样

*{margin: 0;padding: 0;}
html,body{
    /*很重要，这步不设置高度，下面box高度100%不会起作用*/
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;/*若想起作用记得设置上面body的高为100%*/
    /*width: 100vw;*/
    /*height: 100vh;*/
    display: flex;
    flex-direction: column;
    text-align: center;
}
.top {
    height: 50px;
    background: yellow;
}
.center {
    flex: 1;
    background: red;
}
.bottom {
    height: 50px;
    background: pink;
}

4 table表格布局方式

css代码如下，html及图片和2中的一样

*{margin: 0;padding: 0;}
html,body{
    /*很重要，这步不设置高度，下面box高度100%不会起作用*/
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;/*若想起作用记得设置上面body的高为100%*/
    display: table;
    text-align: center;
}
.parent > *{
    display: table-row;/*不是table-cell*/
}
.top {
    height: 50px;
    background: yellow;
}
.center {
    background: red;
}
.bottom {
    height: 50px;
    background: pink;
}

5 grid网格布局方式

css代码如下，html及图片和2中的一样

*{margin: 0;padding: 0;}
html,body{
    /*很重要，这步不设置高度，下面box高度100%不会起作用*/
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;/*若想起作用记得设置上面body的高为100%*/
    display: grid;
    grid-template-rows: 100px auto 100px;
    text-align: center;
}
.top {
    background: yellow;
}
.center {
    background: red;
}
.bottom {
    background: pink;
}

时间是一个好东西，记录的是爱你的证据