
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)
- 将子元素("










