Print CSS - a full page for an element
25,691
Solution 1
Use a page-break-after
http://www.w3schools.com/cssref/pr_print_pageba.asp
#important_thing {
width:100%;
height:100%;
page-break-after:always
}
You may have to combine it with a page-break-before:always
Solution 2
As pointed out by tomorrow__, this can be achieved by applying
width: 100vw; height: 100vh;
to the element.
Comments
-
JP. over 4 years
Is there some syntax I can use in my
media="print"
CSS which will make one div element cover an entire printed page?<div id="important_thing">Important!</div> <ol id="other_stuff"> <li>Thing</li> <li>blah</li> </ol>
print.css
#important_thing { width:100%; height:100%; } #other_stuff li { float:left; width:20pt; height:8pt; }
This doesn't have the desired effect. I'd like to have an entire page for 'important stuff' and as many other pages as required for all the list elements.
Any ideas?
-
sudokai over 6 yearswidth: 100vw; height: 100vh;
-
princ_sameer almost 5 years@tomorrow__ Thank you. If you make that a reply I will upvote it.
-
phil294 over 4 yearsThis inserts a page break after the element, but it does not make the element cover an entire page. The size of the element is untouched which can be checked e.g. by applying background color to it.