如何在不使用 Flex 或 Grid 的情况下实现 HTML 元素的高度自适应

css 两行高度自适应的解决方案

在本文中，我们将探讨如何在不使用 flex 和 grid 的情况下，实现

标签的高度自适应地分配其父容器（

）的剩余高度。

给定以下 html 结构：

<div class="f">
    <div class="h">123</div>
    <div class="s"></div>
</div>

其中：

• .f 为父容器 div
• .h 为固定高度的 div
• .s 为需要自动分配剩余高度的 div

要实现上述效果，我们可以使用 display: table 属性：

.f {
  display: table;
}

该属性将 .f 设置为表格容器，其中 .h 和 .s 设置为表格行 (table-row)。通过这种方式，.s 将自动分配 .f 剩余的高度。

示例代码：

  <style>
    .f {
      display: table;
    }
    .h {
      height: 50px;
    }
  </style><div class="f">
    <div class="h">123</div>
    <div class="s">自适应高度</div>
  </div>

在线演示：

https://jsrun.net/vkpkp/edit

综上所述，使用 display: table 属性，我们可以在不使用 flex 或 grid 的情况下，实现让 .s div 的高度自适应地分配其父容器的剩余高度。

以上就是如何在不使用 Flex 或 Grid 的情况下实现 HTML 元素的高度自适应的详细内容，更多请关注其它相关文章！