CODEWITHSUNDEEP
cssprinting
JP.
JP.

Reputation: 5594

Print CSS - a full page for an element

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?

Upvotes: 23

Views: 35014

Answers (2)

phil294
phil294

Reputation: 10912

As pointed out by tomorrow__, this can be achieved by applying 

width: 100vw; height: 100vh;

to the element.

Upvotes: 6

Traingamer
Traingamer

Reputation: 1423

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

Upvotes: 24

Related Questions