首先看一下要实现的效果,灰色为父元素,card随父元素的高度自适应:
html:
<div class="ant-card card">
<div class="ant-card-head">Card title</div>
<div class="ant-card-body">
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
...
</div>
<div class="ant-card-actions">...</div>
</div>
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兼容性也很好,大部分浏览器都已支持;其余方案学习的意义更大。
最后附上测试地址,大家可以动手实践一下。
最后的最后,这些方案都是有幸跟两位css大神学的,想一起学习的可以留言拉你入群。