css样式，左右子容器如何设置和父容器一致的高度？

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

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

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

• https://newsn.net/say/css-calc.html

本文测试环境：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>

场景二（推荐）

设置父容器不设置高度，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>

场景三（推荐）

父容器不设置高度，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>

场景四（不推荐）

父容器设置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>

场景五（不推荐）

父容器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>

相关链接

• https://newsn.net/say/css-input-outline.html
• https://newsn.net/say/css-flex-demo.html
• https://newsn.net/say/css-flex-axis.html

总结

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

• https://newsn.net/tag/css/

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