我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

苏南大叔继续来谈谈基础的css问题，本文仍然是个非常简单的文章，高手请飘过。

苏南大叔：css样式，左右子容器如何设置和父容器一致的高度？ - css-same-height
css样式，左右子容器如何设置和父容器一致的高度？（图4-1）

本文要讨论的问题和上一篇文章有些类似，上一篇文章一般是用来解决左右两列的宽度问题，这一篇文章用来讨论高度问题。上一篇文章，请点击下面的连接查看：

本文测试环境：win10，chrome@96.0.4664.45。一个父容器，两个左右排列子容器，希望左右两侧具有同样的高度。同样，这个需求可以使用js来解决。但是，能用css解决的问题，为啥非要假手于js呢？

场景一

父容器设置高度，子容器高度100%。
代码如下：

<style>
    .container{
        width: 100%;
        background: pink;
        height:500px;
    }
    .left{
        width:50%;
        background: red;
        float:left;
        height:100%;
        font-size: 36px;
    }
    .right{
        width:50%;
        background: blue;
        float:left;
        height:100%;
        font-size: 36px;
    }
</style>
<div class="container">
    <div class="left">
        高度100%
    </div>
    <div class="right">
        高度100%
    </div>
</div>
HTML

苏南大叔：css样式，左右子容器如何设置和父容器一致的高度？ - css-same-height-1
css样式，左右子容器如何设置和父容器一致的高度？（图4-2）

场景二（推荐）

设置父容器不设置高度，display:table，子容器设置display:table-cell。
代码如下：

<style>
    .container{
        width: 100%;
        background: pink;
        display: table;
    }
    .left{
        width: 50%;
        display: table-cell;
        background: red;
    }
    .right{
        background: blue;
        width: 50%;
        display: table-cell;
    }
</style>
<div class="container">
    <div class="left">
        table-cell<br/>
        table-cell<br/>
        table-cell<br/>
        table-cell<br/>
        table-cell<br/>
        table-cell<br/>
        table-cell<br/>
        table-cell<br/>
    </div>
    <div class="right">
        table-cell
    </div>
</div>
HTML

苏南大叔：css样式，左右子容器如何设置和父容器一致的高度？ - css-same-height-2
css样式，左右子容器如何设置和父容器一致的高度？（图4-3）

场景三（推荐）

父容器不设置高度，display:flex，子容器其中一个设置高度。

<style>
    .container{
        width: 100%;
        background: pink;
        display: flex;
    }
    .left{
        width:50%;
        background: red;
        height:500px;
        font-size: 36px;
    }
    .right{
        width:50%;
        background: blue;
        font-size: 36px;
    }
</style>
<div class="container">
    <div class="left">
        设置高度
    </div>
    <div class="right">
        不设置高度
    </div>
</div>
HTML

苏南大叔：css样式，左右子容器如何设置和父容器一致的高度？ - css-same-height-3
css样式，左右子容器如何设置和父容器一致的高度？（图4-4）

场景四（不推荐）

父容器设置overflow，子容器设置较大的margin-bottom和padding-bottom，三者都不设置高度。

<style>
    .container{
        width: 100%;
        background: pink;
        overflow: hidden;
    }
    .left{
        width:50%;
        background: red;
        float:left;
        font-size: 36px;
        margin-bottom:-10000px;
        padding-bottom: 10000px;
    }
    .right{
        width:50%;
        background: blue;
        float:left;
        height:100%;
        font-size: 36px;
        margin-bottom:-10000px;
        padding-bottom: 10000px;
    }
</style>
<div class="container">
    <div class="left">
        不设置高度<br/>
        不设置高度<br/>
        不设置高度<br/>
        不设置高度<br/>
        不设置高度<br/>
        不设置高度<br/>
        不设置高度<br/>
        不设置高度<br/>
    </div>
    <div class="right">
        不设置高度
    </div>
</div>
HTML

场景五（不推荐）

父容器position:relative，同时overflow:hidden。其中一个子容器不设置高度，另外一个子容器position:absolute，同时left或者right设置为另外一容器的宽度，然后高度设置一个极大值。
代码如下：

<style>
    .container{
        width: 100%;
        background: pink;
        position: relative;
        overflow: hidden;
    }
    .left{
        width: 50%;
        background: red;
        float:left;
    }
    .right{
        background: blue;
        width: 50%;
        position: absolute;
        left:50%;
        top:0;
        height: 999999999px;
    }
</style>
<div class="container">
    <div class="left">
        正常设置<br/>
        正常设置<br/>
        正常设置<br/>
        正常设置<br/>
        正常设置<br/>
        正常设置<br/>
        正常设置<br/>
        正常设置<br/>
    </div>
    <div class="right">
        position:absolute;<br/>
        left:左边的宽度;<br/>
        height:无限大;<br/>
    </div>
</div>
HTML

相关链接

总结

css的flex布局，是很难理解的，多试试总是有收获。更多css使用技巧，请参考苏南大叔的博客：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   css