固定div高度，不考虑内部元素

Question

出于报告目的，我希望在report-canvas中使用固定高度的div mm：

.report-canvas {
    height: 335mm;
    min-height: 335mm;
    max-height: 335mm;
}

页面具有以下结构：

  <div class="a4">
    <div class="header"></div>
    <div class="report-canvas"></div>
    <div class="footer"></div>
  </div>

当.report-canvas没有任何子元素时，此方法很好用。但是，当我开始添加h2，table和其他div时，页脚被向下推到页面外部，而report-canvas也是如此大。如何强制report-canvas始终具有相同的大小，而与子元素无关？

这是其他元素的CSS：

.a4 {
    page-break-before:always;
    clear: both;
    margin: 0 auto;
    border: 1px solid #888888;
    width: 250mm;
    height: 365mm;
  }
.header {
    padding-bottom: 10px;
    height: 35px;
  }
.footer {
    padding-top: 10px;
    height: 25px;
  }

Answer 1

您可以在overflow: hidden上使用overflow: scroll或report-canvas