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

Question

How can I set the height to 100% of chosen print paper?

CSS

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

When I print in Google Chrome, the printed div will only be as high as the content in the div.

Is it possible to make a div as high as chosen paper size?

Answer 1

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% };

Answer 2

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.

Answer 3

If you add a page break to the end, the element will extend to the bottom of the last page. It's particularly useful if you want a footer to appear at the bottom of the last page:

<div style='position:relative;overflow:hidden;background:#ffe!important'>
    <div style='margin-bottom:200px'>
        <p>Content here</p>
    </div>
    <div style='page-break-before:always'></div>
    <div style='position:absolute;bottom:0'>Footer</div>
</div>

This won't give you an extra blank page - so long as you don't have any content after the page break (the absolutely positioned footer doesn't count, unless it somehow spills onto the second page). Watch out for margins which extend outside the body!