如何使div 100%有表头和固定表尾

要实现div 100%有表头和固定表尾，可以使用CSS的position属性和flex布局来实现。

首先，需要将父容器设置为flex布局，并设置高度为100%。这样可以确保子元素能够填充满整个父容器。

接下来，将表头和表尾分别放置在父容器的第一个子元素和最后一个子元素中。可以使用HTML的table标签来实现表格结构，或者使用div等其他元素来模拟表格结构。

为了实现固定表尾，可以使用CSS的position属性将表尾固定在底部。将表尾的position属性设置为fixed，并将其bottom属性设置为0，这样表尾就会固定在父容器的底部。

以下是一个示例的HTML和CSS代码：

HTML代码：

<div class="container">
  <div class="header">表头</div>
  <div class="content">表内容</div>
  <div class="footer">表尾</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  background-color: #f0f0f0;
  padding: 10px;
}

.content {
  flex: 1;
  overflow: auto;
}

.footer {
  position: fixed;
  bottom: 0;
  background-color: #f0f0f0;
  padding: 10px;
}

在上述示例中，表头和表尾的样式可以根据实际需求进行调整。通过设置表头和表尾的背景色、内边距等属性，可以使其与内容区域有明显的区分。

对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的品牌商，建议在实际应用中根据需求选择适合的云计算服务提供商的解决方案。腾讯云提供了丰富的云计算产品和服务，可以通过访问腾讯云官方网站获取更多相关信息。