How to set div height to 100% of chosen print paper?

The easiest way I found to do this was use Viewport units and page-break-after:always. This works well for printing multiple pages.

I suggest structuring your HTML like this:

<div class="someContainerClass">
  <section id="pageOne"></section>
  <section id="pageTwo"></section>
  <section id="pageThree"></section>
</div>

And using this CSS:

section {
  width: 100vw;
  height: 100vh;
  page-break-after: always;
}

This way you can contain your content in the page it needs to be.


width: 100%;
height:100%;
position:absolute;
top:0px;
bottom:0px;
margin: auto;
margin-top: 0px !important;
border: 1px solid;

also, if position absolute won't work you can do the same with position:fixed; this will work but might do some more damage to your layout, depending on how everything is arranged :)

I'll edit this to make it more obvious, so... if you are using position fixed and you have multiple pages they will just go one on top of the other so that wouldn't be right... but in order to get the right result with position absolute you have to keep in mind that the css style here will take 100% of the height, but it's the height of it's parent... so if the parent is the body just add html, body{ height:100% };

Tags:

Css

Printing