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

给定以下 html 结构：

    
123
    

其中：

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

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

.f {
  display: table;
}

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

示例代码：

  


  

    
123
    
自适应高度
  

在线演示：

https://jsrun.net/vkpkp/edit

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

今天关于《如何在不使用 Flex 或 Grid 的情况下实现 HTML 元素的高度自适应》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！