五种CSS方式实现三栏布局的方法

转自：微点阅读  https://www.weidianyuedu.com

在网页布局中，三栏布局是一种常见的布局方式，尤其在 PC 端。如下图所示。

三栏布局

从上到下由页头、内容和页脚组成，内容由左、中、右三列组成，其中左右两列的宽度固定，中间一列自适应。假设左右宽度是 100px，header 和 footer 的高度是 60px。

下面介绍五种方式，分别是：浮动、绝对定位、flex-box 和 grid-box 和表格布局。

HTML 骨架如下：

<main>    <header>header</header>    <article>        <section class="left">left</section>        <section class="center">center</section>        <section class="right">right</section>    </article>    <footer>footer</footer></main>

浮动布局

使用浮动需要把 HTML 骨架调整一下，将三个 section 的顺序调整为：

<!-- center 移到第一个 --><section class="center">center</section><section class="left">left</section><section class="right">right</section>

代码如下：

header{    height: 60px;}footer{    height: 60px;    /* article 中的元素使用了浮动，这里清除一下 */    clear: both;}article{    /* 值是三个时，分别表示 上、左右、下 */    /* 左右的 padding 值应与 left、right 区域宽度一致 */    padding: 0 100px 0;}article section{    float: left;}.center{    /* 让中间的容器宽度等于父容器的宽度 */    /* 父容器还有 padding，因此父容器两侧会有 100px 的空白区域 */    width: 100%;}.left{    width: 100px;    /* margin 的值是百分比时，是相对于父容器的宽度 */    /* -100% 会向左移动父容器的宽度那么长 */    margin-left: -100%;    /* 使用相对定位 */    position: relative;    right: 100px;}.right{    width: 100px;    margin-right: -100px;}

这种实现被称为“圣杯布局”。除了上面的方式之外，使用浮动 + calc 也可以做到中间部分自适应。HTML 骨架也不需要做调整。代码如下：

header{    height: 60px;}footer{    height: 60px;    clear: both;}article section{    float: left;}.left {    width: 100px;}.right {    width: 100px;}.center{    /* 宽度是一个计算值，用父容器宽度，减去左右容器的宽度 */    width: calc(100% - 200px);}

还有一种常见的使用浮动实现的三栏布局，被称为“双飞翼布局”。它的 HTML 结构如下：

<main>    <header>header</header>    <article class="container column">        <section class="center">center</section>    </article>    <article class="left column">left</article>    <article class="right column">right</article>    <footer>footer</footer></main>

CSS 代码如下：

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

双飞翼布局与圣杯布局相似，不同的是双飞翼布局没有使用相对定位。

绝对定位

代码如下：

header{    height: 60px;}footer{    height: 60px;}article{    position: relative;}article section{    position: absolute;    height: 200px;}.left {    width: 100px;}.right {    right: 0;    width: 100px;}.center{    /* 左右都设置值，可以让中间容器自适应 */    left: 100px;    right: 100px;}

绝对定位不好的一点是，因为元素脱离了文档流，导致 footer 元素会“往上跑”，与定位元素重叠。要让 footer 跑到下面，需要做额外的样式处理，比如设置 margin-top、给 footer 也设置上绝对定位。如果三个容器的高度不一致，或者容器内的内容溢出，就会影响布局美观性。不推荐使用这种方式实现圣杯布局。

弹性盒子

使用弹性盒子很容易创建出圣杯布局。代码如下：

article{    display: flex;}.left, .right{    /* 这里的宽度也可以使用 flex 中的 flex-basis 属性 */    /* flex-basis 表示 flex 元素在主轴方向上的初始大小 */    /* flex-basis: 100px */    width: 100px;}.center{    flex-grow: 1;}

flex-grow 是重点，它指定 flex 容器中剩余空间的多少应该分配给项目。因为左右容器的宽度都已经确定，如果指定是 1，表示剩余空间都分配给 .center 容器。如果是 .5 则表示分配一半空间给中间的容器。

网格布局

网格布局是新出的一种布局方式。首先改造一下 HTML 骨架。代码如下：

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

然后是 CSS 代码：

main{    display: grid;    grid-template-columns: 100px 1fr 100px;}header, footer{    height: 60px;    grid-column: 1/-1;}

网格布局比较难理解，属性众多，但可以轻松布局出复杂的页面。解释一下上面的 css 代码。在 grid-template-columns 属性中设置了三列的页面布局。行数是自适应的。三列的左右两端都是 100px，中间是自适应，1fr 在这里会分配剩余的空间。

接着设置 header 和 footer，重新设置它们占用的列数，1/-1 表示占满一行（自己独占一列）。

在不改变 HTML 骨架的情况下使用 grid 布局，只需要设置 article 容器为网格布局即可。代码如下：

article{    display: grid;    grid-template-columns: 100px 1fr 100px;}

两行代码就可以做到圣杯布局，足见网格布局的强大。

表格布局

使用表格布局也可以做到中间容器自适应，代码如下：

article{    display: table;    width: 100%;}article section{    /* 子元素是单元格 */    display: table-cell;}.left{    width: 100px;}.right{    width: 100px;}

以上几种方式都可以做到中间容器自适应，但也有一个问题，如果浏览器窗口很小，中间容器的宽度会很短。

中间部分变得很窄

解决这个问题可以在 body 元素上设置一个最小宽度，当窗口宽度比这个宽度还要小时，就不再自适应。

body{    min-width: 600px;}