html - Prevent Content From Spilling Over to Next Page

Question

I am building an app that formulates how much CBD needs to be put into a product to meet certain requirements. I have included instructions and required materials that are needed to make each recipe. When the user prints the recipe, ideally I would like to not show the instructions or required materials on the sheet.

I have managed to hide all of the required materials and instructions but when the page is set to be printed, it prints a blank page (I'm assuming because the content is spilling over to the next page even though it is hidden) and I do not want this to happen. Here is the HTML for the required materials and instructions:

<div class="noprint">
  <hr>
  <h1 id="centered">Instructions</h1><br>
  <h3 id="centered">Required Materials</h3>
  <div class="row">
    <div class="column">
      <h5 id="centered">Items</h5>
      <ul>
        <li>1 Aluminum Mixing Bowl</li>
        <li>1 Metal Measuring Cup</li>
        <li>1 Glass Measuring Cup</li>
        <li>1 Small Scale</li>
      </ul>
    </div>
    <div class="column">
      <h5 id="centered">Items</h5>
      <ul>
        <li>1 250 mL Beaker</li>
        <li>1 Funnel</li>
        <li>1 Plastic Pipet</li>
        <li>Cleaning Supplies & PPE</li>
      </ul>
    </div>
  </div>
  <h3 id="centered">Steps for Creation</h3>
  <div class="instructions">
    <ol>
      <li>Always begin by washing and sanitizing hands. Then proceed to sanitize all material with rubbing alcohol
        and paper towels.
      </li>
      <li>Measure out the correct amount of either the Dead Sea Salt, Epson Salt, or Baking Soda. Do so by using the
        metal measuring cup and scooping the raw goods into the glass measuring cup. Put the raw material into the 
        aluminum mixing bowl.
      </li>
      <li>
        Repeat Step 2 with both the other two materials not used in Step 1.
      </li>
      <li>
        Measure out the correct amount of CBD tincture with the aide of the 250 mL beaker. Mix in the tincture slowly,
        preferably in thirds of the total amount of tincture needed.
      </li>
      <li>
        Use the plastic pipet to measure out the correct amount of milliliters of Grosso E.O. Mix in the Grosso E.O with
        the rest of the mixture. Continue to mix until the solution is as homeogeneous as possible.
      </li>
      <li>
        Put aluminum foil over the top of the mixing bowl, write the batch number on top, and store the finished product
        in a freezer one day before bottling.
      </li>
    </ol>
  </div>
</div>

And here is the CSS for the "noprint" class:

/* Do not print */
.noprint {
  visibility: hidden;
}

Any help is greatly appreciated. Thank you!

question from:https://stackoverflow.com/questions/65830310/prevent-content-from-spilling-over-to-next-page

Answer 1

I found the solution. Here is the code that I added to my print styles sheet.

     html, body {
        border: 1px solid white;
        height: 99%;
        page-break-after: avoid;
        page-break-before: avoid;
     }