纯css实现一个高度自适应的card

首先看一下要实现的效果，灰色为父元素，card随父元素的高度自适应：

20190712150804.jpg

html:

  
Card title
  

    
Card content
    
Card content
    
Card content
    
Card content
    ...
  
  
...

1. flex方案

该方案不需要知道header和antions的高度，最灵活，也是首选方案

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  
  [class*="-card-body"] {
    flex: 1;
    overflow: auto;
  }
}

2. 不使用flex的方案

该方案的滚动条有些瑕疵，滚动范围包含了header和actions，后面会完善

/* 滚动条不完美 */
.card {
  height: 100%;
  overflow: hidden;
  
  [class*="-card-head"], [class*="-card-actions"] {
    position: relative;
    z-index: 10;
  }

  [class*="-card-head"] {
    background-color: #fff;
  }
  
  [class*="-card-body"] {
    margin-top: -57px;
    padding-top: 57px;
    padding-bottom: 48px;
    margin-bottom: -48px;
    height: 100%;
    overflow: auto;
  }
}

3. 不使用flex且滚动条完美的解决方案

.card {
  position: relative;
  height: 100%;
  overflow: hidden;

  [class*="-card-body"] {
    width: 100%;
    position: absolute;
    top: 57px;
    left: 0;
    bottom: 48px;
    overflow: auto;
  }
  
   [class*="-card-head"], [class*="-card-actions"] {
     width: 100%;
     z-index: 10;
  }
  
   [class*="-card-actions"] {
     position: absolute;
     left: 0;
     bottom: 0;
  }
}

4. 不使用flex，滚动条完美，且代码更少的解决方案

.card {
  height: 100%;
  overflow: hidden;
  padding-top: 57px;
  padding-bottom: 48px;
  

  > [class*="-card-head"] {
    margin-top: -57px;
  }
  
  > [class*="-card-body"] {
    height: 100%;
    overflow: auto;
  }
}

5. 使用css3的calc方案

.card {
  height: 100%;
  overflow: hidden;

  
  > [class*="-card-body"] {
    height: calc(100% - 57px - 48px);
    overflow: auto;
  }
}

总结

大家在使用时，首选flex方案，不需关心header和actions的高度，更灵活；calc方案代码最简洁，目前calc兼容性也很好，大部分浏览器都已支持；其余方案学习的意义更大。

图片.png

最后附上测试地址，大家可以动手实践一下。

最后的最后，这些方案都是有幸跟两位css大神学的，想一起学习的可以留言拉你入群。