打印 CSS - 一个元素的完整页面

Question

我可以在media="print" CSS 中使用一些语法来使一个 div 元素覆盖整个打印页面吗？

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

这没有达到预期的效果。我希望有一个完整的页面用于“重要内容”以及所有列表元素所需的其他页面。

有什么想法吗？

Answer 1

使用 page-break-after

http://www.w3schools.com/cssref/pr_print_pageba.asp

#important_thing { 
  width:100%; 
  height:100%;
  page-break-after:always 
}

您可能需要将它与 page-break-before:always

结合使用

Answer 2

正如明天__所指出的，这可以通过应用来实现

width: 100vw; height: 100vh;

到元素。