css 左侧高度自适应

CSS是前端开发中非常重要的一部分。其中一个比较常用的技巧就是让左侧高度自适应。在实际开发中，经常会遇到这样的情况：左侧是导航菜单，右侧是内容区，导航菜单的高度可能比内容区高度更高或更低。如果两者高度不同，界面就会显得比较奇怪。这时就需要使用CSS来让左侧自适应。

.nav{
    width: 200px;
    float: left;
    background-color: #f2f2f2;
    padding: 10px;
    box-sizing: border-box;
    min-height: 100%;
}
.content{
    width: calc(100% - 200px);
    float: left;
    padding: 10px;
    box-sizing: border-box;
}
.clear{
    clear: both;
}
    

如上所示，我们首先给左侧导航菜单添加min-height:100%属性，这样就能让左侧的高度自适应。接着，我们用float属性让左侧和右侧都浮动到页面左边，这样才能让两列并排显示。接下来，我们用calc函数计算出内容区的宽度，这里是100%减去左侧菜单的宽度。最后，我们还需要再添加一个clearfix来清除浮动。

总之，让左侧高度自适应的技巧在前端开发中是非常常见的。以上是一个简单的示例，希望大家能够理解并应用到实际开发中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！