为带resize类的动态表格页面添加可随内容下移且支持打印的页脚

需求说明 #

给带有resize类、包含动态表格的页面添加页脚，需满足：

• 页脚随表格内容增多、容器垂直调整时自动下移，始终位于所有内容下方
• 打印时完整输出所有内容，且页脚显示在每一页的底部

现有问题代码 #

.resize{
    resize: vertical;
    overflow: auto;
}

body {
    position: relative;
    min-height: 100%;
}

.footer {
    position: inherit;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    /* overflow: hidden; */
    text-align: center;
    margin: auto;
}

解决方案 #

一、屏幕显示：自适应内容的页脚 #

改用Flex布局实现容器与页脚的联动，确保页脚始终在内容下方：

/* 重置body默认样式 */
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* 可调整容器设置 */
.resize {
  resize: vertical;
  overflow: auto;
  flex: 1; /* 自动填充页脚以外的空间 */
  min-height: 200px; /* 限制最小高度，避免容器缩至不可用 */
  padding: 10px; /* 可选，优化内容边距 */
}

/* 页脚样式 */
.footer {
  height: 100px;
  width: 100%;
  text-align: center;
  background-color: #ffffff; /* 防止内容滚动时穿透覆盖 */
  line-height: 100px; /* 可选，垂直居中文字 */
}

原理：Flex垂直布局让resize容器自动占满页脚外的剩余空间，容器调整大小或内容增多时，页脚会自动保持在底部位置。

二、打印适配：每页底部显示页脚 #

通过打印媒体查询设置固定页脚，同时保证内容完整输出：

@media print {
  body {
    min-height: auto; /* 取消视口高度限制，让内容自然展开 */
  }

  .resize {
    resize: none; /* 打印时禁用调整功能 */
    overflow: visible; /* 让所有内容完整显示 */
    margin-bottom: 120px; /* 预留页脚空间，避免内容被遮挡 */
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
  }
}

原理：打印时用fixed定位将页脚固定在每页底部，给内容区添加底部边距防止被页脚遮挡，同时禁用容器的调整和滚动属性，确保所有内容被完整打印。

注意事项 #

• 如果resize容器不是直接嵌套在body下，需将其与页脚放在同一个父容器内，并给父容器设置display: flex; flex-direction: column; min-height: 100vh;
• 根据实际页面样式调整页脚高度和内容边距，避免布局冲突

内容的提问来源于stack exchange，提问作者Haidi Elnagdy