title: Orphan CSS: How avoid headers (h1, h2...) on bottom page?
body: <p>I have a large HTML document with headers (h1, h2, h3...) and paragraphs. When I print the document, I want that, automatically, headers at bottom of document go to next page:</p>
  
  <p><a href="https://i.stack.imgur.com/tPtST.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tPtST.png" alt="enter image description here"></a></p>
  
  <p>How can I do? I use "orphans: 3" CSS with paragraphs and works with "p" tags, but with h1 or h2 don't work.</p>
  
  <pre><code>@page {
    size: A4;
  }
  
  p {
    orphans:3;
  }
  
  h1, h2 {
    orphans:3
  }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/YwrwOY" rel="noreferrer">Full example on action</a> where:</p>
  
  <ul>
  <li>1-2 page: paragraphs orphan works fine.</li>
  <li>2-3 page: headers don't works.</li>
  </ul>
  
  <p>Requirements:</p>
  
  <ul>
  <li>HTML have one main div container.</li>
  <li><strong>Don't alter HTML</strong>.</li>
  <li>Browser support isn't important (on my specific job).</li>
  <li>I need some trick in CSS (no JS or Jquery, preferably)</li>
  <li>I can't use page-break-before:always because I want that headers only go to next page when appears at bottom of page.</li>
  </ul>