我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:css样式,左右子容器如何设置和父容器一致的高度? - css-same-height
css样式,左右子容器如何设置和父容器一致的高度?(图4-1)

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

本文测试环境:win10chrome@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>

苏南大叔: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>

苏南大叔: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>

苏南大叔:css样式,左右子容器如何设置和父容器一致的高度? - css-same-height-3
css样式,左右子容器如何设置和父容器一致的高度?(图4-4)

场景四(不推荐)

父容器设置overflow,子容器设置较大的margin-bottompadding-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>

相关链接

总结

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

助理微信

微信打赏码

微信公众号

微信小程序

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

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

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

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