html - 带有溢出和边距的 CSS 打印

标签 html css printing

我正在尝试打印小笼卡并遇到了一个非常好的答案 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 页时，它无法正确打印(我也知道为什么会这样)。正如您在正在创建的第二张卡片上看到的那样，溢出的内容一直在继续。现在要修复它，我只是在 .subpage 元素上执行 overflow: hidden; 但这并不能真正解决问题。我们仍然想打印那些溢出的内容。我有什么想法可以做到这一点吗？

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

最佳答案

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

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

希望对您有所帮助。

关于html - 带有溢出和边距的 CSS 打印，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47022992/

上一篇：css - svg 对圆形标签/元素的涟漪效应

下一篇：html - 我的 HTML 内容流出容器

相关文章：

css - 在宽度为 1600 的情况下，chrome 正在拾取 1455px 的媒体查询

c++ - QPrinter 链接器无法找到文件

c# - 在 ASP.NET 页面中控制打印

javascript - 通过 php 添加到变量将不起作用

javascript - DataTables 分页 css 在模式数据表中损坏

javascript - 淡入淡出 PNG Sprite

用于调试 stdlib 变量的 Python pretty-print 将无法工作

html - 当屏幕宽度小于 X 时是否有可能禁用继承？

javascript - 当我单击粗刷按钮时，如何使用 javascript 在 html 中删除 Canvas 中的线宽

jquery - 在图标上悬停文本显示(滑动或淡入淡出)

©2024 IT工具网  联系我们