[分享]css两栏高度自适应

CSS实现两栏布局是网页开发中常使用的一种布局方式，而且在很多场合下也是必不可少的。比如，当需要展示文章内容和相关的广告或者说明的时候，两栏布局是一种常用的方式。但是在进行两栏布局的时候我们会发现一个...

CSS实现两栏布局是网页开发中常使用的一种布局方式，而且在很多场合下也是必不可少的。比如，当需要展示文章内容和相关的广告或者说明的时候，两栏布局是一种常用的方式。但是在进行两栏布局的时候我们会发现一个问题，在内容比较少的情况下左右两栏的高度可能不一致，这时候我们需要使用CSS来实现两栏的高度自适应。

 .wrapper{
        display: flex;
    }
    .left{
        flex: 1;
    }
    .right{
        flex: 1;
    } 

上述代码的作用是让两栏都占据50%的宽度，并且左右两栏等高。这时候，无论左右两栏内容多少，两栏高度都会自适应。

但是要注意的是，上述代码只适用于现代浏览器，如果需要兼容低版本浏览器，可以使用绝对定位的方式。

 .wrapper{
        position: relative;
    }
    .left{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 50%;
    }
    .right{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
    } 

上述代码的作用是让左右两栏都绝对定位，并且宽度占据50%，这样两栏的高度也会自适应。但是要注意，这种方式需要父元素设置position: relative，不然无法生效。

以上是实现CSS两栏高度自适应的两种方式，具体根据实际情况进行选择。