title: DOMPDF page break
body: <p>I'm trying to generate reports with header, footer and content. The header and the footer works fine, however the text of the content div breaks higher than I want. <a href="http://i.stack.imgur.com/AkmBW.png" rel="nofollow">See the image</a>. I really don't understand why the page is breaking so high.</p>
  
  <p>This is the CSS code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@page { 
    margin: 180px 50px; 
  }
  
  #header { 
    position: fixed; 
    left: 0px; 
    top: -150px; 
    right: 0px; 
    height: 150px; 
    text-align: left; 
  }
  
  #footer { 
    position: fixed; 
    left: 0px; 
    bottom: -180px; 
    right: 0px; 
    height: 80px; 
    text-align: right; 
    background-color: lightblue 
  }
  
  #footer .page:after { 
    content: counter(page, upper-roman); 
  }
  
  #content { 
    padding-left: 10mm; 
    padding-right: 5mm; 
    line-height: 6mm; 
    background-color: lightgreen; 
    height: 850px;
  }
  #logo { 
    height: 4cm; 
  }
  #head_text { 
    display: inline-block; 
    line-height: 6mm; 
    padding-top: 15px; 
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is the HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        '.$css.'
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div id="header"&gt;
        '.$header.'
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
        &lt;p class="page"&gt;Página &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="content"&gt;
        '.$content.'
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Could anyone help to solve this problem? Tanks!</p>