Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Print CSS - a full page for an element

Tags:

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?

like image 857
JP. Avatar asked Sep 30 '10 15:09

JP.


People also ask

How do I write CSS for print media?

Of course, you could separate the declarations for screen and print into two CSS files. Just set the media type for the screen output to media=“screen” and the media type for printing to media=“print” , omitting it for the first one if you want to build on the screen style sheet.

How do I print an entire HTML page?

window. print() WILL print the whole page.


2 Answers

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

like image 192
18 revs, 10 users 77% Avatar answered Sep 20 '22 17:09

18 revs, 10 users 77%


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

width: 100vw; height: 100vh;

to the element.

like image 28
phil294 Avatar answered Sep 23 '22 17:09

phil294