等高列の概要layout_html/css_WEB-ITnose

前回の記事「聖杯レイアウトの概要」では、複数列のページですべての列の高さを動的に変更するアダプティブ レイアウト効果を実現できるいくつかの一般的な列レイアウト方法をまとめました。列幅は、作業における多くのレイアウトのニーズを満たすことができます。その後、列レイアウトに関する記事をさらに収集していたときに、この問題は前の記事の友人のコメントでも指摘されていました。それは、列の各列を確実に配置しながら列レイアウトを実装する方法です。同じ高さ。この種の同じ高さの列レイアウトは Web サイトで実際に非常に一般的であることがわかりました。そこで、この記事では、この新しい需要を解決するために利用できるいくつかの方法を要約します。

1. 方法 1: Universal flex

前回の記事とは異なり、今回は flex 方法を最初に置きます。比較すると、レイアウト方法のうち、すべてが列であるためです。互換性があれば、常にそれを最初に使用してページ レイアウトを完成させる必要があります。前の記事を開いて列レイアウトを実装する flex に関するコードの最後から 2 番目の部分を見つけるか、前の記事で提供されたコードをダウンロードして flex_layout.html を直接プレビューすると、前の記事のコードが実際には変更されたことがわかります。均等な高さの列レイアウトを実現するには、同じコードで前の記事で説明した 5 つの列レイアウトを実現でき、また、この記事で説明した均等な高さのレイアウトも実現できます。この機能は他の方法では実現できません。均等な高さのレイアウトを実現できる理由は、flex css 属性に関連しています。この属性は align-item です。デフォルト値はストレッチです。layout__main やlayout__aside などの flex item 要素の高さが未定義であるか、auto に設定されている場合、flex item 要素の高さまたは幅は flex の交差軸をカバーするように引き伸ばされます。上記で提供されているフレックス学習リソースの詳細については、ここで簡単なリファレンスを参照してください。

2. 方法 2: テーブルまたは疑似テーブルを使用する

前の記事では紹介しなかった他の 2 つのレイアウト方法があります。1 つ目はテーブル レイアウトまたは疑似テーブル レイアウトです。ここに記載されています。テーブル レイアウトは、table tr td などの要素を使用して実装されます。ほとんどの Web 開発者が HTML を使い始めるときに最初に触れるのは、間違いなくこの方法です。これはシンプルで効率的です。列のレイアウトを作成するのは問題ではありません。テーブルのネスト構造が多すぎて、HTML が複雑になり、DOM の操作やレンダリングに適さないためです。要するに、欠点が多いため、現在の環境では使用されることが少なくなりました。疑似テーブル レイアウトは実際にはテーブル レイアウトに似ていますが、CSS の助けを借りて、table tr td などの直接テーブル要素を直接使用することはできませんが、display: table、display: table-row、display: を通じて変更します。 table-cell 要素の表示プロパティを使用すると、ブラウザはこれらの要素をテーブルとしてレンダリングできます。このレンダリングのパフォーマンスは、table-layout、border などのテーブル固有の CSS プロパティも含めて、同じです。 -折りたたみと境界線の間隔によって結果が生じる可能性があります。テーブル レイアウト手法はほとんど使用されたことがないため、この記事で紹介する必要はありませんが、疑似テーブル レイアウト手法は 2 日間勉強した結果、疑似テーブル レイアウト手法には を使用するよりも多くの利点があることがわかりました。テーブル レイアウトを直接作業に適用すると、多くのメリットが得られます。ただし、疑似テーブル レイアウトの使用方法を説明する前に、まず疑似テーブル関連の知識を理解する必要があります:

1) 疑似テーブルのパフォーマンスに使用できる表示属性値は次のとおりです:

2) 要素の表示属性が上記の値に設定されている場合、その要素はその属性に対応するテーブル要素とみなすことができます。たとえば、table-cell は td に対応します。同時に、この要素は、display: table 要素や inline-table 要素などの table 要素と同じ機能を持ちます。この要素は、本来は表の表示にのみ有効な 3 つの属性、table-layout、border-collapse、border-spacing を使用できます。 : table-cell 要素は td に似ています。同様に、幅に非常に敏感で、マージン値には反応せず、パディングには効果的です。

3) table-cell についてもう 1 つ注意すべき点は、float、position:absolute などの他の CSS プロパティによって破棄されるため、これらのプロパティを同時に使用できないことです。

4) table 要素を直接使用する場合とは異なり、table 要素を使用する場合は、次の table 要素の入れ子構造に完全に準拠する必要があります。

<table>    <thead>        <th></th>    </thead>    <tbody>        <tr>            <td></td>        </tr>    </tbody>    <tfoot>        <th></th>    </tfoot></table>

そして、疑似を使用しますテーブルのこれらの属性については、特定の属性のみを単独で使用できます。ブラウザは、疑似テーブル の入れ子構造の整合性を確保するために、欠落している ボックス をこれらの要素の外層でラップします。要素ボックス 性的には、これらのボックスは、よく言及される行ボックスのように目に見えません。インターネット上の一部の記事では、このアプローチを匿名フォームとも呼んでいます。以下のコードでは、要素「display: table-row」と「display: table」は tb-cell 要素の外層に追加されません:

.tb-cell {    display: table-cell;    padding: 10px;    border: 1px solid #ccc;}<div class="tb-cell">这是第1个display: table-cell;的元素。</div><div class="tb-cell">这是第2个display: table-cell;的元素。</div>

ただし、表示される効果は次のとおりです (青色の背景は親レイヤーのラッピング要素: width: 800px; margin-right: auto):

因为浏览器自动在这两个元素的外层，加了跟能够跟tr和table起相同作用的框，来包含这两个元素形成的框，所以这两个元素看起来就跟实际的表格效果一样。假如浏览器没有做这个处理，这两个元素之间是不可能没有间隙的，中间会有一个因为换行符显示出来的空格。 这种自动添加的框都是行内框，不是块级框。

接下来看看如何通过这些伪table的属性来完成上文的分栏布局以及本文要求的等高分栏布局，玩法有很多：（本文相关源码下载）

玩法一：模拟直接用表格布局 （对应源码中table_layout1.html）

这种方法的思路是布局时完全按照表格的嵌套层次来处理，把display: table, display: table-row, display: table-cell都用上，相当于就是利用完整的table来做，比如说要实现上文的布局三（3栏布局，2个侧边栏分别固定在左边和右边，中间是主体内容栏），就可以这么干：

<div class="layout">    <div class="layout__row">        <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside>        <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点，旁边的高度都会自动增加</div>        <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside>    </div></div>

<style type="text/css">    .layout {        display: table;        width: 100%;    }    .layout__row {        display: table-row;    }    .layout__col {        text-align: center;        display: table-cell;    }    .layout__col + .layout__col {        border-left: 10px solid #fff;    }    .layout__main {        background-color: #4DBCB0;    }    .layout__aside {        width: 200px;        background-color: #daf1ef;    }</style>

效果还是那个效果，而且天生支持等高布局：

这个布局原理跟使用table是完全一样的，所以使用起来非常容易（以上提供的是针对上文布局三的实现，其它四个布局的实现不会再一一介绍了，源码里面也不会提供，因为相对比较简单）。

这种伪table布局有什么特点呢：

1）相比直接用表格元素，这种做法不需要考虑语义，表格元素是有语义的，主要是用来显示网页上列表型的数据内容，虽然可以完成布局，但是布局结构都是没有语义的，所以直接用表格不合适，而这种伪table布局的特点就是：它没有语义，但是可以像表格那样布局；

2）html的层次结构相比直接用table元素也要简单一些，我们这里只用到了3层，直接用table元素的话可能还有tbody这一层；

3）相比上文提到的那些布局方法，如圣杯布局和双飞翼布局，这个做法在css方面相对简单，在html方面也只多了一层嵌套；

4）缺点是分栏之间的间隔不能用margin和padding来做，如果用margin，这个属性在display: table-cell的元素上根本不会生效；如果用padding，那像demo里面各栏的背景色就都会连到一块，做不出间隔的效果，如果在layout__col里面再嵌套一层，在这一层设置背景色的话，又会增加html的层次，也不是很好。我这里是投了个巧，用border处理了一下。

玩法二：去掉display: table-row（对应源码中的table_layout2.html）

前面说过，浏览器会用匿名表格的方式，添加缺失的框，所以玩法一中的代码，把layout-row完全去掉，一点都不影响布局效果：

<div class="layout">    <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside>    <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点，旁边的高度都会自动增加</div>    <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside></div>

<style type="text/css">    .layout {        display: table;        width: 100%;    }    .layout__col {        text-align: center;        display: table-cell;    }    .layout__col + .layout__col {        border-left: 10px solid #fff;    }    .layout__main {        background-color: #4DBCB0;    }    .layout__aside {        width: 200px;        background-color: #daf1ef;    }</style>

玩法三：去掉display: table（对应源码中的table_layout3.html）

根据玩法二，可以试想一下是否能再把display: table这一个属性给去掉，反正浏览器还会再添加框来包裹：

<div class="layout">    <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside>    <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点，旁边的高度都会自动增加</div>    <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside></div>

<style type="text/css">    .layout__col {        text-align: center;        display: table-cell;    }    .layout__col + .layout__col {        border-left: 10px solid #fff;    }    .layout__main {        background-color: #4DBCB0;    }    .layout__aside {        width: 200px;        min-width: 200px;        background-color: #daf1ef;    }</style>

效果是：

这个并没有达到我们的效果，因为我需要主体内容栏能够自适应宽度。产生这个效果的原因是什么，就是因为没有加显示display: table这一层，浏览器自动加了一个框，不过这个框是行内框，导致主体内容栏显示的宽度就跟内容的宽度一致了。为了解决这个问题，可以这么干，html结构不变，css稍加改动：

.layout__main {    width: 3000px;    background-color: #4DBCB0;}.layout__aside {    width: 200px;    min-width: 200px;    background-color: #daf1ef;}

关键的代码就是红色新增的那两行，首先给主体内容栏设置一个很长的宽度，而且只能用具体的长度设置，不能用百分比，然后给侧边栏设置一个最小宽度，免得主体内容栏把侧边栏的宽度给挤掉了。这个原理就是因为display: table-cell的作用，导致layout__main跟layout__aside表现出跟td元素一样的特性，td默认的宽度就是可自动调整的，即使宽度设置的很大，也不会撑破table的宽度，这里虽然那个自动添加的框看不到，但是这个框的最大宽度也就是浏览器的宽度，layout__main不会打破这个宽度的，所以可以放心使用。

玩法四：去掉layout这一层包裹元素（对应源码：table_layout4.html）

如果网站比较简单，去掉layout这一层包裹元素也是可以的：

<header>顶部</header><aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside><div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点，旁边的高度都会自动增加</div><aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside><footer>底部</footer>

<style type="text/css">    .layout__col {        text-align: center;        display: table-cell;        line-height: 50px;    }    .layout__col + .layout__col {        border-left: 10px solid #fff;    }    .layout__main {        width: 3000px;        background-color: #4DBCB0;    }    .layout__aside {        width: 200px;        min-width: 200px;        background-color: #daf1ef;    }</style>

以上四种做法都能实现我们想要的分栏等高布局，兼容性方面，不考虑IE8及以下，其它浏览器几乎没有问题。

由于匿名表格的作用，导致采用伪table布局的方法变得非常简洁，上文之所以没提到这个做法，是因为完全不知道有匿名表格这回事，我也是写这篇文章才学习到的，学完之后，发现又找到了一个做分栏布局的好办法，希望前面的这些介绍能帮助你掌握好这个用法。实际上伪table的这些属性，尤其是table-cell，用途非常多，本文没有办法一一介绍，但是能提供一个思路，将来工作中也许有很多其它布局场景，我们都可以想想用table-cell来处理。

3. 方法三：使用绝对定位

上文没有介绍的另外一种分栏布局方法就是这里要介绍的绝对定位。之所以没介绍这个方法，是因为上文介绍的都是分栏自适应布局的方法，而绝对定位的做法，不能完全做到我们想要的分栏自适应布局，分栏自适应有两个原则：第一是主体内容栏宽度自适应，这点绝对定位是可以做到的；第二点是所有栏的高度都能动态变化，并且不能导致父容器高度塌陷，不能在各栏内部出现滚动或溢出的情况，这点绝对定位不容易做到适用所有场景。而本文又把这种布局方法拿出来介绍，是因为绝对定位做等高布局很容易，所以用绝对定位做等高分栏布局是一种可行的办法，只是这种方法适用的场景有一些限制，需要根据实际情况考虑是否要采用。

做法一：所有栏都采用绝对定位（对应源码中absolute_layout1.html）

<header>顶部</header><div class="layout">    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>    <div class="layout__main">内容栏宽度自适应</div>    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside></div><footer>底部</footer>

<style type="text/css">    .layout {        height: 300px;        position: relative;    }    .layout__aside, .layout__main {        position: absolute;        top: 0;        bottom: 0;    }    .layout__main {        left: 210px;        right: 210px;    }    .layout__aside {        width: 200px;    }    .layout__aside--left {        left: 0;    }    .layout__aside--right {        right: 0;    }</style>

效果：

这种布局方法的特点是：

1）主体内容栏是自适应的；

2）所有栏完全等高，效果跟flex布局和伪table布局的效果一样；

从这两点来看，这种绝对定位的方法还是比较好用的，不过它有一个非常大的使用限制，就是父元素的高度没有办法通过它的内部元素给撑起来，要用的话，必须想办法让父元素有高度，适合做父元素高度可知或者全屏布局。比如以下这个代码就是全屏布局的一个例子（对应源码中absolute_layout2.html）：

<header>顶部</header><div class="layout">    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>    <div class="layout__main">内容栏宽度自适应</div>    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside></div><footer>底部</footer>

<style type="text/css">    html,body {        margin: 0;        height: 100%;    }    footer {        position: absolute;        bottom: 0;        width: 100%;    }    .layout {        width: 100%;        position: absolute;        top: 50px;        bottom: 50px;    }    .layout__aside, .layout__main {        position: absolute;        top: 0;        bottom: 0;    }    .layout__main {        left: 210px;        right: 210px;    }    .layout__aside {        width: 200px;    }    .layout__aside--left {        left: 0;    }    .layout__aside--right {        right: 0;    }</style>

效果：

做法二：侧边栏绝对定位，主体内容栏保持流式布局（对应源码中absolute_layout3.html）

<div class="layout">    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>    <div class="layout__main">内容栏宽度自适应<br>高度增加一点，旁边的高度都会自动增加</div>    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside></div>

<style type="text/css">    .layout {        position: relative;    }    .layout__aside {        position: absolute;        top: 0;        bottom: 0;    }    .layout__main {        margin: 0 210px;    }    .layout__aside {        width: 200px;    }    .layout__aside--left {        left: 0;    }    .layout__aside--right {        right: 0;    }</style>

效果：

这个方法的特点是：

1）主体内容栏是宽度自适应的；

2）所有栏也是完全等高的；

上面的代码中，layout__main通过magin来给侧边栏留出空间，其实也可以在layout元素上添加padding来处理，作用是一样的。这个方法相比前一个方法好一点的是，父元素的高度可以通过主体内容栏给撑起来，不过由此也带来了一个新问题，就是内容栏高度不够的时候，侧边栏就会出现溢出或者滚动，解决这个新问题的办法有2个：第一，如果侧边栏的内容都是已知的，并且没有折叠展开这种会改变侧边栏内容高度的功能，那么可以给layout设置一个min-height来处理；第二，如果侧边栏的内容是动态的，除了给layout加min-height之外，还得在每次改变侧边栏内容的时候，主动去调整主体内容栏的高度，如果主体内容栏的高度小于侧边栏的高度，就要更新主体内容栏的高度。不过如果你的内容栏的内容很多，侧边栏内容较少的话，就不用考虑这个新问题了。

绝对定位的做法就是这样，第一种限制较高；第二种稍微强一些，在一些场景下，可能还得借助JS来处理，所以综合起来不算是一个非常好的方式。只有你的布局需求恰好满足它的条件时，可能才会考虑使用它，就像上文中我提出的项目一的需求，就一定要用绝对定位的布局来做。

4. 方法四：借助边框，背景实现假等高

前面介绍了几种分栏等高布局，有table布局，伪table布局，绝对定位布局，flex布局，这四种布局方法在实现等高布局时，属于完全等高的情况，就是说他们布局出来的页面，各栏的真实高度都是相同的，并且在任意栏的内容动态变化时，其它栏的高度都能相应地自动调整，如果布局的时候用的是这几个布局方法，那么等高的问题就不存在了。不过回看一下上文内容的话，上文提到的3种布局方式：圣杯布局，双飞翼布局，float布局，不用JS的话，就无法做到这种完全等高的效果。这三种布局，只能考虑借助边框和背景实现视觉上的等高，也就是假等高的做法。毕竟从效果上来说，如果没有设置背景和边框的话，即使是完全等高，视觉上也看不出来，所以假等高的做法是值得采用的。

做法一：利用背景图片

以布局容器宽度固定的左中右三栏布局说明这个做法的步骤，首先制作一张高度较小，宽度跟布局容器宽度相同的背景图片，把这张图片作为布局容器的背景图垂直平铺。这张背景图要求跟页面一样也是分栏，而且每栏的宽度和栏之间的间隔都跟页面布局里面的栏位宽度和栏位间隔相同，这样才能保证，背景图片的每个栏位与页面里面的每个栏位重合。因为页面里面的每个栏位底下，都有一个背景图片的栏位跟它对应，所以即使某一栏高度不够，但是视觉上这个栏位的高度跟布局容器的高度是相同的，这就是借助背景图来达到视觉等高的原理。这个做法的经典例子就是 http://www.w3school.com.cn/ ，它的布局效果是这样的：

看起来这是一个三栏等高布局，分栏是通过float实现的，等高却不是完全等高，而是通过背景图片实现的，它在布局容器上用了下面这张背景图：

它的布局html结构是（马赛克掉的是header,导航栏,footer，跟分栏布局没有关系，所以注掉了）：

然后各栏只要都向左浮动，配置好宽度就行：

前面说明这个做法的步骤包括举的例子都针对的是布局容器宽度固定的左中右三栏布局，如果是自适应的分栏布局，又该怎么处理？下面以上文圣杯布局的布局三如何借助背景图片做到等高效果来说明（为了减少篇幅，其它四种布局不会一一说明，但是这五种布局在源码中都有demo页面可查看，分别对应grail_bg_layout{1,5}.html）。

布局三：3栏布局，2个侧边栏分别固定在左边和右边，中间是主体内容栏：

<div class="layout--wrapper">    <div class="layout">        <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>        <div class="layout__main">内容栏宽度自适应<br>高度增加一点，旁边的高度看起来都跟内容栏高度一样</div>        <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>    </div></div>

<style type="text/css">    .layout:after {        content: " ";        clear: both;        display: table;    }    .layout__aside, .layout__main {        float: left;        height: 100%;    }    .layout--wrapper {        background: url(aside_left.png) left top repeat-y #4DBCB0;    }    .layout {        background: url(aside_right.png) right top repeat-y;        padding:0 210px;    }    .layout__main {        width: 100%;    }    .layout__aside {        width: 200px;    }    .layout__aside--left {        margin-left: -210px;    }    .layout__aside--right {        margin-right: -210px;        float: right;    }</style>

效果：

实现这个等高效果的关键是：

1）去掉在layout__aside layout__main上设置的背景色；

2）制作2张背景图片，宽度都是210 * 10，分别用来做两个侧边栏的背景：

aside_left.png :

aside_right.png:

3） html结构稍微调整下，加一层wrapper

4）layout--wrapper的背景如下设置：

background : url(aside_left.png) left top repeat-y #4DBCB0 ;

这样左侧边栏和内容栏就都有了背景，左侧边栏与内容栏之间的间隔效果也出来了。

5）layout的背景如下设置：

background : url(aside_right.png) right top repeat-y ;

这样右侧边栏就有了背景，右侧边栏与内容栏之间的间隔效果也出来了。

以上就是利用背景图做假等高效果的全部内容，这个做法对于要用背景来呈现等高效果的布局是非常好用的一个方法，虽然网上都说它的缺点是用到了图片，布局一改，图片就要改，我个人认为这并不是缺点，因为这样的需求变动，第一是无法避免，第二是变动地次数不一定很多，第三即使变了改起来也是两三分钟的事，要是自己会点PS，那弄起来就更简单了。能解决问题的简单方法就是最好的办法。

做法二： 利用边框重叠

首先得说这个做法，适合要用边框来呈现等高效果的布局，也就是说各栏不能有背景，否则看起来边框是等高了，但是背景没有等高。它的原理要分成两部分来说，如果是2栏布局，做法比较简单，比如左右分栏的布局，给侧边栏加一个右边框，给内容栏加一个左边框，然后给内容栏加上负的margin-left，让2个边框重合，这样不管哪个栏位内容多，边框重叠之后的高度就跟整体的高度一致了，也就达到了我们想要的等高效果；如果是多栏布局，这种边框重叠的方式不能做到所有场景下的视觉等高，比如说左中右三栏布局，现在是按边框重叠的办法实现了下等高，当左边栏的内容动态增加很多时，右边侧边栏跟内容栏的边框整体高度，并不会动态增加，然后就会形成错层的效果，对于这种情况，可以利用绝对定位，用额外的空元素模拟栏与栏之间的边框效果。

下面以上文圣杯布局的布局一和布局三如何借助边框重叠和模拟做到等高效果来说明（为了减少篇幅，其它布局不会一一说明，但是这几种布局在源码中都有demo页面可查看，分别对应grail_border_layout{1,3}.html）。

1）布局一：2栏布局，侧边栏固定在左边，右侧是主体内容栏：

<div class="layout">    <aside class="layout__aside">侧边栏宽度固定</aside>    <div class="layout__main">内容栏宽度自适应<br>高度增加一点，旁边的高度看起来都跟内容栏高度一样</div></div>

<style type="text/css">    .layout:after {        content: " ";        clear: both;        display: table;    }    .layout__aside, .layout__main {        float: left;    }    .layout {        padding-left: 201px;    }    .layout__main {        width: 100%;        margin-left: -1px;        border-left: 1px solid #ccc;    }    .layout__aside {        width: 200px;        border-right: 1px solid #ccc;        margin-left: -201px;    }</style>

要点是：

1）要重新调整layout的padding值，和layout__aside的margin值，栏与栏之间不能有间隔；

2）layout__main设置-1px的margin-left和1px的border-left；layout__aside设置1px的border-right

效果：

布局三：3栏布局，2个侧边栏分别固定在左边和右边，中间是主体内容栏：

<div class="layout">    <aside class="layout__division layout__division--left"></aside>    <aside class="layout__division layout__division--right"></aside>    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定<br>再加点东西<br>再加点东西</aside>    <div class="layout__main">内容栏宽度自适应<br>高度增加一点</div>    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside></div>

<style type="text/css">    .layout:after {        content: " ";        clear: both;        display: table;    }    .layout__aside, .layout__main {        float: left;        height: 100%;    }    .layout {        padding:0 201px;        position: relative;    }    .layout__main {        width: 100%;    }    .layout__aside {        width: 200px;    }    .layout__aside--left {        margin-left: -201px;    }    .layout__aside--right {        margin-right: -201px;        float: right;    }    .layout__division {        position: absolute;        border-left: 1px solid #ccc;        height: 100%;    }    .layout__division--left {        left:200px;    }    .layout__division--right {        right:200px;    }</style>

效果：

布局三这个做法的原理比真实的边框重叠还要简单些，但是不如那种方法简洁，毕竟要增加没有用的html元素，所以不算是一个好方法。

最后综合比较背景和边框这两种假等高做法，更值得推荐的是做法一，边框这种效果，通过背景图也是可以做出来的，而且边框能够实现的视觉效果有限，利用边框的多栏等高布局还得增加冗余的HTML元素，缺陷比较明显。

5. 结束语

本文介绍了4种可以做到完全等高的分栏自适应布局方法，对于上文的几种分栏布局：圣杯布局，双飞翼布局，float布局，也提供了一个简单高效的方法可以做到视觉上的假等高效果，这些方法都是可靠有效的，只要满足自己的工作需求，喜欢用哪种就用哪种，毕竟工作的目的是完成工作目标，而不是尝试哪种工具好用。但如果公司的产品不考虑那些陈旧的浏览器的话，我觉得所有的布局只需要三个方法：flex，table-cell和position，其它的圣杯布局，双飞翼布局，float布局就让它成为经典，留在自己的博客总结中就好。PS: 虽然上文我在推荐圣杯布局，但是我已经打算把我的项目二的布局方式换成table-cell来搞了。

本文内容繁多，相信耽误您不少时间，谢谢阅读，提前祝您新年快乐：）

本文相关源码下载