title: How do I emulate a page break with CSS and HTML?
body: <p>I'm trying to generate a CSS class that will help me define a "page break".</p>
  
  <p>I know that if I use <code>@media:print .MyDiv{ width:100%; height:100%; }</code>, I can then set the class of a <code>div</code> to <code>MyDiv</code> and it will be -- as best as possible -- 1 page of print.</p>
  
  <p>This is great, but I have encountered a new item that I don't know how to handle, and I'm hoping that something similar can be done. I need to create an empty <code>div</code> that will stretch itself out to the "end of the page".</p>
  
  <p>Something like:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  @media print .PageBreak { 
      width: 100%; 
      height: *; /* space left on current page */ 
  }
  @media screen .PageBreak {
      border-bottom: 1px solid black;
  }
  &lt;/style&gt;
  
  &lt;!-- ... --&gt;
  
  &lt;div&gt;This should appear on the first page.&lt;/div&gt;
  
  &lt;div class="PageBreak"&gt;&lt;!--
      This DIV should stretch itself out so that the next piece
      of content appears on the next page (only when printing).
  --&gt;&lt;/div&gt;
  
  &lt;div&gt;This should appear on the second page.&lt;/div&gt;
  </code></pre>
  
  <p></p>