开发者

Print CSS - a full page for an element

开发者 https://www.devze.com 2023-01-18 10:34 出处:网络
Is there some syntax I can use in my media=\"print\" CSS which will make one div element cover an e开发者_Go百科ntire printed page?

Is there some syntax I can use in my media="print" CSS which will make one div element cover an e开发者_Go百科ntire 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?


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


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

width: 100vw; height: 100vh;

to the element.

0

精彩评论

暂无评论...
验证码 换一张
取 消