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

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


Have a look at media queries.

@media print {
    html, body {
        height: 100%;
    }
}

So you can change output without messing up your screen layout


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!

Tags:

Css

Printing