我正在尝试打印小笼子卡，并且遇到了一个非常好的答案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但是这并不能解决问题。我们仍然希望打印那些溢出的内容。我有什么想法可以做到这一点吗？
我想到的解决方案是“估计”当我接近填满所有空间然后关闭页面，打开一个新的，冲洗并重复直到完成。我真的不想这样做，因为它很繁琐且不准确。
答案 0 :(得分：1)
您的页面固定高度，这基本上导致了问题。将其更改为min-height，它应该可以正常工作：
.page {
width: 3in;
min-height: 5in;
}
@media print {
html,
body {
width: 3in;
min-height: 5in;
}
}
希望它有所帮助。