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

CSS两栏布局是网页设计中常用的一种布局。这种布局一般分为左右两栏，左栏一般是导航或者logo区域，而右栏则是主体内容区域。在设计过程中，我们通常希望左右两栏布局高度自适应，即两栏总高度随着内容的增多...

CSS两栏布局是网页设计中常用的一种布局。这种布局一般分为左右两栏，左栏一般是导航或者logo区域，而右栏则是主体内容区域。在设计过程中，我们通常希望左右两栏布局高度自适应，即两栏总高度随着内容的增多而自动调整。

最简单的CSS两栏布局代码如下：

<div class="wrapper">
  <div class="left">左栏</div>
  <div class="right">右栏</div>
</div>

<style>
    .wrapper {
        display: flex;
    }
    .left {
        width: 200px;
    }
    .right {
        flex: 1;
    }
</style> 

以上代码中，我们使用了flex布局，给容器.wrapper设置了display: flex属性。左栏设置了一个固定的宽度200px，而右栏则设置了flex: 1，表示占据剩余空间。

然而，以上代码并不能让左右两栏高度自适应，因为左右两栏是分开的，他们的高度并不相互影响。此时，我们需要让左右两栏处于同一父级元素下，这个父级元素的高度随着左右两栏内容的增多而自动调整。

利用伪元素清除浮动，我们可以实现左右两栏高度自适应，代码如下：

<div class="wrapper">
  <div class="left">左栏</div>
  <div class="right">右栏</div>
  <div class="clear"></div>
</div>

<style>
    .wrapper {
        display: flex;
    }
    .left {
        width: 200px;
        float: left;
    }
    .right {
        flex: 1;
        float: right;
    }
    .clear::after {
        content: "";
        display: block;
        clear: both;
    }
</style> 

以上代码中，我们在.wrapper容器的最后添加了一个.clear元素。然后，我们使用CSS的伪元素::after清除浮动，使得.clear元素可以自动适应左右两栏高度的变化。这样，左右两栏就可以高度自适应了。

总的来说，CSS两栏布局高度自适应是网页设计中必不可少的布局方式之一。我们可以使用flex布局和伪元素清除浮动来实现这一效果。