用display table-cell实现 等高的两栏布局

此文章是为了简单地实现等高的两栏布局，目标效果如下图1。下面将介绍3种实现方式（inline-block,table-cell,flex-box），并进行对比。

图 1

第一种方式：inline-block

代码结构：

<div id="main">   
  <div class="header">Header</div>    
  <div class="left">Left Nav</div>  
  <div class="content">Content</div>
</div>

可以设置left和content都为inline-block，并设置各自的宽度比例即可。注意：为了使left和content都水平对齐，最好加一个属性vertical-align: top
css:

html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 30px;
            color: red;
        }
        #main{
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: white;

        }
        .header{
            height: 100px;
            background-image: url("./img/n1.jpeg");
        }
        .left,.content{
            display: inline-block;
            vertical-align: top;
        }

        .left{
            width: 200px;
            height: 100%;
            background-color: rgba(254,229,136,1);
        }

        .content{
            width: auto;
            height: 100%;
            background-color: white;
            background-color: rgba(281,255,34,1);
        }

效果如图2，图3所示：

图 2 图 3

这里有2个不足：一是content未能填充main中多余的空白，这个不足可以通过calc计算解决width: calc(100% - 200px - ),为font-size!=0引起的left和content之间的空白;二十如果content的内容区超出了main的高度，背景色无法覆盖，如图3所示，用table-cell 则可以解决这个问题。

第二种方式：table-cell（IE8以上都支持）

文档结构和inline-block的一样，不同的在于css。main设置为display: table; left和content都设置为display: table-cell; 这里left虽然设置了高度，但是最终的高度是按left和content中最高的值来设置的，所以不会出现inline-block中内容超出的情况，即无论content中有多少内容，所有内容都会包含中main中。注意：一旦设置了display:table-cell，margin的设置会失效，padding继续有效，如果你需要的效果是left 和content都有背景色，同时它们之间有留白，可能需要变以下文档结构。
css：

        #main{
            display: table;
            min-height: 80vh;
            width: 100%;
            background-color: white;

        }
        .header{
            display: table-caption;
            height: 100px;
            background-image: url("./img/n1.jpeg");
        }
        .left,.content{
            display: table-cell;
        }

        .left{
            width: 200px;
            height: 100px;
            background-color: rgba(254,229,136,1);
        }

        .content{
            width: auto;
            background-color: white;
            padding-left: 10px;
            background-color: rgba(281,255,34,1);
        }
        .center{
            background-color: white;
            border: 1px solid black;
            width: 50%;
            /*text-align: center;*/
        }

第三种方式：flex-box

效果如图4、5所示：

图 4 图 5

文档结构如下：

<div id="main">
    <div class="header">Header</div>
    <div id="container">
        <div class="left">Left Nav</div>
        <div class="content">
            Content
 <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>dfdsfdsfsdfdsfs
</div>
    </div>
</div>

css:

        #main{
            width: 100%;
            height: 100%;
        }
        #container{
            display: flex;
            overflow: auto;
            width: 100%;
            height: 300px;
            background-color: orange;
        }
        .header{
            height: 100px;
            width: 100%;
            background-image: url("./img/n1.jpeg");
        }

        .left{
            width: 200px;
            height: 100%;
            margin-top: 10px;
            background-color: rgba(254,229,136,1);
        }

        .content{
            flex: 1;
            height: 100%;
            background-color: white;
            margin-left: 10px;
            margin-top: 10px;
            background-color: rgba(281,255,34,1);
        }

这种方式content不用设计算值，只要父级容器display:flex;，content设置flex:1;即可自动填补空白。不足在内容超出容器，content不能覆盖如图5，而且flexbox的兼容性不如 table-cell .