css实现两行高度自适应
在布局中，经常会遇到需要让两行元素的高度自适应的情况。假设第一行元素（”
f
“）的高度是固定的，而第二行元素（”
s
立即学习“前端免费学习笔记（深入）”；
“）的高度是响应式动态变化的，我们如何在不使用flex和grid的情况下，让”
s
立即学习“前端免费学习笔记（深入）”；
“的高度自动分配”
f
“的剩余高度呢？
解决这个问题的一个方法是使用css的”display”属性。
将父容器（”
“）的”display”属性设置为”table”。将子元素（”
“和”
“）的”display”属性分别设置为”table-caption”和”table-cell”。
通过这种方式，”
s
立即学习“前端免费学习笔记（深入）”；
“将自动分配”
f
“剩余的高度。
以下是一个示例代码：
123
这样，无论”
s
立即学习“前端免费学习笔记（深入）”；
“的内容如何变化，它的高度都将自动调整，以填充父容器（”
f
“）剩余的空间。
[在线演示](https://jsrun.net/vkpkp/edit)
以上就是如何使用CSS实现两行高度自适应，让第二行高度响应式变化？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630216.html
微信扫一扫 
支付宝扫一扫 
