具有溢出和边距的CSS打印

Question

我正在尝试打印小笼子卡，并且遇到了一个非常好的答案here （当然稍作修改）。

到目前为止，这是我对它的看法（Fiddle）：

/* First CSS file */

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizeing: border-box;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

p,
table {
  margin: 0 0 4px 0;
}

p:last-child,
table:last-child {
  margin: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0;
}

.main-table {
  margin: 0;
}

.main-table th,
.main-table td {
  border: 1px solid #000000;
}

.main-table th:first-child,
.main-table td:first-child {
  border-left: none;
}

.main-table th:last-child,
.main-table td:last-child {
  border-right: none;
}

.page {
  padding: 10px;
  margin: 25px auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  position: relative;
  /*padding: 5px;*/
  /*height: auto;*/
  height: 100%;
  /* overflow: hidden; */
}

.barcode {
  text-align: center;
}

.genotype-caption {
  width: 1px;
  padding-right: 2px;
  white-space: nowrap;
}

.half-width {
  width: 50%;
}

.mbp {
  position: absolute;
  bottom: 0;
}

.mbp td {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.bold {
  font-weight: bold;
}

.c-align {
  text-align: center;
}

@media print {
  html {
    margin: 0px;
  }
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
  .barcode div {
    box-shadow: inset 0 0 0 10000px #000;
  }
}


/* Second CSS file */

body {
  font-size: 8pt;
}

.page {
  width: 3in;
  height: 5in;
}

.subpage.padded {
  /*max-height: calc(5in - 25px);*/
  padding-bottom: 15px;
}

.label.from {
  width: 38px;
}

.label.maternal,
.label.paternal {
  width: 19px;
}

@page {
  size: 3in 5in portrait;
  margin: 0;
}

@media print {
  html,
  body {
    width: 3in;
    height: 5in;
  }
}

<div class="book">
  <div class="page">
    <div class="subpage padded">
      <div class="barcode">
        <!--?xml version="1.0" standalone="no" ?-->

        <svg width="156" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <desc>G-C-000000097364</desc>
          <g id="bars" fill="black" stroke="none">
            <rect x="0" y="0" width="2" height="30"></rect>
            <rect x="3" y="0" width="1" height="30"></rect>
            <rect x="6" y="0" width="1" height="30"></rect>
            <rect x="11" y="0" width="2" height="30"></rect>
            <rect x="14" y="0" width="1" height="30"></rect>
            <rect x="18" y="0" width="1" height="30"></rect>
            <rect x="22" y="0" width="1" height="30"></rect>
            <rect x="25" y="0" width="2" height="30"></rect>
            <rect x="28" y="0" width="3" height="30"></rect>
            <rect x="33" y="0" width="1" height="30"></rect>
            <rect x="37" y="0" width="1" height="30"></rect>
            <rect x="41" y="0" width="2" height="30"></rect>
            <rect x="44" y="0" width="1" height="30"></rect>
            <rect x="47" y="0" width="2" height="30"></rect>
            <rect x="50" y="0" width="3" height="30"></rect>
            <rect x="55" y="0" width="1" height="30"></rect>
            <rect x="57" y="0" width="3" height="30"></rect>
            <rect x="61" y="0" width="4" height="30"></rect>
            <rect x="66" y="0" width="2" height="30"></rect>
            <rect x="69" y="0" width="2" height="30"></rect>
            <rect x="73" y="0" width="2" height="30"></rect>
            <rect x="77" y="0" width="2" height="30"></rect>
            <rect x="80" y="0" width="2" height="30"></rect>
            <rect x="84" y="0" width="2" height="30"></rect>
            <rect x="88" y="0" width="2" height="30"></rect>
            <rect x="91" y="0" width="2" height="30"></rect>
            <rect x="95" y="0" width="2" height="30"></rect>
            <rect x="99" y="0" width="2" height="30"></rect>
            <rect x="103" y="0" width="1" height="30"></rect>
            <rect x="106" y="0" width="1" height="30"></rect>
            <rect x="110" y="0" width="1" height="30"></rect>
            <rect x="115" y="0" width="2" height="30"></rect>
            <rect x="118" y="0" width="1" height="30"></rect>
            <rect x="121" y="0" width="1" height="30"></rect>
            <rect x="123" y="0" width="1" height="30"></rect>
            <rect x="128" y="0" width="2" height="30"></rect>
            <rect x="132" y="0" width="1" height="30"></rect>
            <rect x="134" y="0" width="2" height="30"></rect>
            <rect x="140" y="0" width="1" height="30"></rect>
            <rect x="143" y="0" width="2" height="30"></rect>
            <rect x="148" y="0" width="3" height="30"></rect>
            <rect x="152" y="0" width="1" height="30"></rect>
            <rect x="154" y="0" width="2" height="30"></rect>
            <rect x="156" y="0" width="0" height="30"></rect>
            <rect x="156" y="0" width="0" height="30"></rect>
          </g>
        </svg>
      </div>
      <p class="bold c-align">3090</p>
      <p class="c-align">Group 0001 - Mice</p>
      <p><span class="bold">Research Prot#:</span> <span>AC00000 A2017-000</span></p>
      <p><span class="bold">Animal ID:</span> <span>7036</span></p>
      <table>
        <tbody>
          <tr>
            <td class="label from"><span class="bold">From:</span></td>
            <td class="label maternal"><span class="bold">F#</span></td>
            <td class="value maternal"><span class="bold"></span></td>
            <td class="label paternal"><span class="bold">M#</span></td>
            <td class="value paternal"><span class="bold"></span></td>
          </tr>
        </tbody>
      </table>
      <p><span class="bold">DoB:</span> <span></span></p>
      <p><span class="bold">Strain:</span> <span>Some made-up strain</span></p>
      <table class="main-table">
        <thead>
          <tr>
            <th class="c-align half-width"><span class="bold">Date</span></th>
            <th class="c-align half-width"><span class="bold">Event</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7065</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7065</span> <span class="direction">Out</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7067</span> <span class="direction">In</span></td>
          </tr>
        </tbody>
      </table>
      <table class="mbp">
        <tbody>
          <tr>
            <td class="c-align">
              <span class="protocol-number">AC00000</span> <span class="submission-number">A2017-000</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="page">
    <div class="subpage padded">
      <div class="barcode">
        <!--?xml version="1.0" standalone="no" ?-->

        <svg width="156" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <desc>G-C-000000097363</desc>
          <g id="bars" fill="black" stroke="none">
            <rect x="0" y="0" width="2" height="30"></rect>
            <rect x="3" y="0" width="1" height="30"></rect>
            <rect x="6" y="0" width="1" height="30"></rect>
            <rect x="11" y="0" width="2" height="30"></rect>
            <rect x="14" y="0" width="1" height="30"></rect>
            <rect x="18" y="0" width="1" height="30"></rect>
            <rect x="22" y="0" width="1" height="30"></rect>
            <rect x="25" y="0" width="2" height="30"></rect>
            <rect x="28" y="0" width="3" height="30"></rect>
            <rect x="33" y="0" width="1" height="30"></rect>
            <rect x="37" y="0" width="1" height="30"></rect>
            <rect x="41" y="0" width="2" height="30"></rect>
            <rect x="44" y="0" width="1" height="30"></rect>
            <rect x="47" y="0" width="2" height="30"></rect>
            <rect x="50" y="0" width="3" height="30"></rect>
            <rect x="55" y="0" width="1" height="30"></rect>
            <rect x="57" y="0" width="3" height="30"></rect>
            <rect x="61" y="0" width="4" height="30"></rect>
            <rect x="66" y="0" width="2" height="30"></rect>
            <rect x="69" y="0" width="2" height="30"></rect>
            <rect x="73" y="0" width="2" height="30"></rect>
            <rect x="77" y="0" width="2" height="30"></rect>
            <rect x="80" y="0" width="2" height="30"></rect>
            <rect x="84" y="0" width="2" height="30"></rect>
            <rect x="88" y="0" width="2" height="30"></rect>
            <rect x="91" y="0" width="2" height="30"></rect>
            <rect x="95" y="0" width="2" height="30"></rect>
            <rect x="99" y="0" width="2" height="30"></rect>
            <rect x="103" y="0" width="1" height="30"></rect>
            <rect x="106" y="0" width="1" height="30"></rect>
            <rect x="110" y="0" width="1" height="30"></rect>
            <rect x="115" y="0" width="2" height="30"></rect>
            <rect x="118" y="0" width="1" height="30"></rect>
            <rect x="121" y="0" width="1" height="30"></rect>
            <rect x="123" y="0" width="1" height="30"></rect>
            <rect x="126" y="0" width="2" height="30"></rect>
            <rect x="132" y="0" width="3" height="30"></rect>
            <rect x="138" y="0" width="2" height="30"></rect>
            <rect x="141" y="0" width="1" height="30"></rect>
            <rect x="143" y="0" width="2" height="30"></rect>
            <rect x="148" y="0" width="3" height="30"></rect>
            <rect x="152" y="0" width="1" height="30"></rect>
            <rect x="154" y="0" width="2" height="30"></rect>
            <rect x="156" y="0" width="0" height="30"></rect>
            <rect x="156" y="0" width="0" height="30"></rect>
          </g>
        </svg>
      </div>
      <p class="bold c-align">3089</p>
      <p class="c-align">Group 0001 - Mice</p>
      <p><span class="bold">Research Prot#:</span> <span>AC00000 A2017-000</span></p>
      <p><span class="bold">Animal ID:</span> <span>7037</span></p>
      <table>
        <tbody>
          <tr>
            <td class="label from"><span class="bold">From:</span></td>
            <td class="label maternal"><span class="bold">F#</span></td>
            <td class="value maternal"><span class="bold"></span></td>
            <td class="label paternal"><span class="bold">M#</span></td>
            <td class="value paternal"><span class="bold"></span></td>
          </tr>
        </tbody>
      </table>
      <p><span class="bold">DoB:</span> <span></span></p>
      <p><span class="bold">Strain:</span> <span>Some made-up strain</span></p>
      <table class="main-table">
        <thead>
          <tr>
            <th class="c-align half-width"><span class="bold">Date</span></th>
            <th class="c-align half-width"><span class="bold">Event</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
          <tr>
            <td class="c-align"><span>26-May-2017</span></td>
            <td class="c-align"><span class="female">7066</span> <span class="direction">In</span></td>
          </tr>
        </tbody>
      </table>
      <table class="mbp">
        <tbody>
          <tr>
            <td class="c-align">
              <span class="protocol-number">AC00000</span> <span class="submission-number">A2017-000</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

到目前为止看起来很好，我真的很喜欢它是如何制作的。我遇到的一个问题是，当我的内容超过1页时，它无法正确打印（我也知道它为什么会发生）。正如您在创建的第二张卡片上看到的那样，溢出的内容一直在继续。现在要修复它我只是在overflow: hidden;元素上做.subpage但是这并不能解决问题。我们仍然希望打印那些溢出的内容。我有什么想法可以做到这一点吗？

我想到的解决方案是“估计”当我接近填满所有空间然后关闭页面，打开一个新的，冲洗并重复直到完成。我真的不想这样做，因为它很繁琐且不准确。

Answer 1

您的页面固定高度，这基本上导致了问题。将其更改为min-height，它应该可以正常工作：

.page {
  width: 3in;
  min-height: 5in;
}
@media print {
  html,
  body {
    width: 3in;
    min-height: 5in;
  } 
}

希望它有所帮助。