Question

内容应在每个打印页面的页眉和页脚之间显示，而不管内容的大小（长度）。

在当前代码内容与页眉和页脚重叠。我们需要在页眉和页脚之间。

谢谢！

示例代码：

＆＃13;

#main {
  width: 80%;
  margin: auto;
  border-radius: 8px;
  text-align: center;
}
#title-company {
  background-color: #367fa9;
  padding: 5px;
}
.box-header {
  border-bottom: 3px solid #00c0ef;
  border-left: 1px solid;
  border-right: 1px solid;
  text-align: left;
}
@media print {
  #main {
    width: 100%;
    margin: auto;
    text-align: center;
  }
  #orderform {
    text-align: center;
    border-collapse: collapse;
  }
  #title-company {
    width: 100%;
    background-color: #367fa9 !important;
    color: white;
    text-align: center;
    border-radius: 0px 0px 0px 0px;
  }
  .sample-repeat {
    display: block;
    position: fixed;
    top: 0;
    z-index: 5;
    top: 20pt;
  }
  .footer-content {
    bottom: 0pt;
    left: 0px;
    position: absolute;
    page-break-after: always;
  }
}

＆＃13;

<body>
  <div id="main" class="sample-repeat">
    <div id="title-company"></div>
    <div class="box-header with-border" style="border-bottom: 3px solid #00c0ef;">
      <div class="row">
        <div class="col-md-10">Header Section</div>
        <div class="col-md-6">
          <address>
            <strong>Print Date & Time : </strong><span>12/08/2016 10:31:49</span><br>
          </address>
        </div>
        <div class="col-md-6">
          <address>
            <strong>Del. Day & Time: </strong> <span>12/08/2016 10:31:49</span><br/>
          </address>
        </div>
      </div>
    </div>
  </div>
  <div>
    <p>Sample Page Content Sample Page Content Sample Page Content Sample Page Content Sample Page Content</p>
    <p>Sample Page Content Sample Page Content Sample Page Content Sample Page Content Sample Page Content</p>
    <p>Sample Page Content Sample Page Content Sample Page Content Sample Page Content Sample Page Content</p>
    <p>Sample Page Content Sample Page Content Sample Page Content Sample Page Content Sample Page Content</p>
    <p>Sample Page Content Sample Page Content Sample Page Content Sample Page Content Sample Page Content</p>
  </div>
  <div class="footer-content">
    <span>Footer Content Print</span>
  </div>
</body>

＆＃13;

如何使用css在每个页面上的页眉和页脚之间打印内容？

0 个答案: