css 两个div 高度自适应

CSS中有很多种方法可以使两个div高度自适应，下面介绍两种常用的方法。

1. 使用flex布局

.parent {
      display: flex;
      flex-wrap: wrap;
 // 让子元素自动换行}
.child1 {
      flex: 1;
 // 子元素自适应父元素宽度}
.child2 {
      flex: 1;
 // 子元素自适应父元素宽度}

以上代码中，我们先把父元素的display属性设置为flex，子元素就会以flex布局排列，然后设置子元素的flex属性为1，这样就可以实现两个子元素自适应父元素的宽度和高度。

2. 使用position和calc函数

.parent {
      position: relative;
 }
.child1 {
      height: calc(100% - 50px);
 // 子元素高度自适应父元素 - 50px}
.child2 {
      height: 50px;
     // 指定子元素的高度为50px  position: absolute;
     // 绝对定位到父元素底部  bottom: 0;
 // 距离父元素底部0px}
    

以上代码中，我们先把父元素的position属性设置为relative，这样子元素的position属性就可以相对父元素进行绝对定位。子元素1的高度使用calc函数进行计算，子元素2的高度指定为50px，并进行绝对定位到父元素底部。

以上两种方法都可以简单地实现两个div的高度自适应，可以根据具体需求选择使用哪种方法。

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