CSS Printing with overflow and margins

Question

I'm trying to print small cage cards and came across a really nice answer here (with some minor modifications of course).

Here's how it looks for me so far (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>

Looks good so far and I really like how it was made. One problem I came across with is when my content spans more than 1 page it doesn't print properly (and I'm also aware of why it happens). As you see on the second card being created, the overflowing content just goes on and on. Right now to fix it I'm just doing overflow: hidden; on the .subpage element but that doesn't really fix the problem. We still want to print those overflowing content. Any ideas how I could do this?

A solution I have in mind is to "estimate" when I'm close to filling all the space and then close the page, open a new one, rinse and repeat until done. I don't really want to do this though as it is tedious and inaccurate.

So basically you are trying to figure out how to do a fixed header/footer for each page right? — Huangism, Oct 30 '17 at 19:40
@Huangism not really.. for the second card, the next page for the overflowing content should really only contain the next table rows and no need for the headers. — Patrick Gregorio, Oct 30 '17 at 19:44
When you say printing, you mean to actually print on paper right? If that's the case, then you would not need any overflow, just let it print the entire content — Huangism, Oct 30 '17 at 19:46
@Huangism Yes this is to physically print it on paper. I tried doing that and it seems to work when the overflow happens for the last card. If the overflow happens on the previous cards - the overflow prints on top of the barcode for the next card. — Patrick Gregorio, Oct 30 '17 at 19:52
So the barcode is something that exist on every paper? I mean it seems to me that the barcode is a fixed header lol — Huangism, Oct 30 '17 at 20:05
I wonder if this is related to your use of pixels in the printing process. These do not translate well to physical measurements when printing: https://www.w3.org/Style/Examples/007/units.en.html and see "Additional Information" at the bottom of this: https://developers.google.com/speed/docs/insights/UseLegibleFontSizes — Rob, Oct 30 '17 at 20:11
Thanks @Rob I'll try to change those to use either `mm` or `pt`. The answer below seems to work for me though. — Patrick Gregorio, Oct 31 '17 at 13:32

score 1 · Accepted Answer · answered Oct 30 '17 at 20:05

1

You have fixed height for your page which is basically causing the issue. Change it to min-height instead and it should work fine:

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

Hope it helps.

answered Oct 30 '17 at 20:05

Shah Ghafoori

604
3
17

Thanks! This seems to do it for me. I'll have to test it further and will accept as answer tomorrow once I finish some more tests. I'm heading out of the office now. – Patrick Gregorio Oct 30 '17 at 21:07
A problem with this is that the margins I set up doesn't apply to the page where the overflow prints but that's another question. – Patrick Gregorio Oct 31 '17 at 15:07

CSS Printing with overflow and margins

1 Answers1