如何使用CSS实现两行高度自适应，让第二行高度响应式变化？

css实现两行高度自适应

在布局中，经常会遇到需要让两行元素的高度自适应的情况。假设第一行元素（"

f

"）的高度是固定的，而第二行元素（"

s

"）的高度是响应式动态变化的，我们如何在不使用flex和grid的情况下，让"

s

"的高度自动分配"

f

"的剩余高度呢？

解决这个问题的一个方法是使用css的"display"属性。

1. 将父容器（""）的"display"属性设置为"table"。
2. 将子元素（""和""）的"display"属性分别设置为"table-caption"和"table-cell"。

   通过这种方式，"

   s

   "将自动分配"

   f

   "剩余的高度。

   以下是一个示例代码：

   <div class="f" style="display: table;">
       <div class="h" style="display: table-caption;">123</div>
       <div class="s" style="display: table-cell;"></div>
   </div>

   这样，无论"

   s

   "的内容如何变化，它的高度都将自动调整，以填充父容器（"

   f

   "）剩余的空间。

   [在线演示](https://jsrun.net/vkpkp/edit)

以上就是如何使用CSS实现两行高度自适应，让第二行高度响应式变化？的详细内容，更多请关注其它相关文章！