如何删除额外的div高度时，使用flex的内容与动态/未知高度的页眉，内容和页脚部分

在使用flex布局时，如果要删除额外的div高度，同时又要适应动态或未知高度的页眉、内容和页脚部分，可以采用以下方法：

1. 使用flex-grow属性：将页眉、内容和页脚部分放置在一个父容器内，设置该父容器的display属性为flex，并设置flex-direction为column，即垂直方向排列。然后，给内容部分设置flex-grow属性为1，使其在垂直方向上占据剩余空间。

示例代码：

<div class="container">
  <div class="header">页眉</div>
  <div class="content">内容</div>
  <div class="footer">页脚</div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

1. 使用flex属性：与上述方法类似，将页眉、内容和页脚部分放置在一个父容器内，设置该父容器的display属性为flex，并设置flex-direction为column。然后，给内容部分设置flex属性为1，使其在垂直方向上占据剩余空间。

示例代码：

<div class="container">
  <div class="header">页眉</div>
  <div class="content">内容</div>
  <div class="footer">页脚</div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

这两种方法都能够实现删除额外的div高度，使得内容部分与动态或未知高度的页眉、页脚部分适应。在实际应用中，可以根据具体需求选择使用哪种方法。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云弹性伸缩（Auto Scaling）：https://cloud.tencent.com/product/as
• 腾讯云容器服务（Tencent Kubernetes Engine，TKE）：https://cloud.tencent.com/product/tke
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云负载均衡（CLB）：https://cloud.tencent.com/product/clb
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos