DOMPDF перерыв страницы

Я пытаюсь создать отчеты с заголовком, нижним колонтитулом и контентом. Заголовок и нижний колонтитул отлично работают, однако текст содержимого div ломается выше, чем я хочу. See the image. Я действительно не понимаю, почему страница взломается так высоко.DOMPDF перерыв страницы

Это код CSS:

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

И это HTML:

<html> 
 
    <head> 
 
    <style> 
 
     '.$css.' 
 
    </style> 
 
    </head> 
 
    <body> 
 

 
    <div id="header"> 
 
     '.$header.' 
 
    </div> 
 

 
    <div id="footer"> 
 
     <p class="page">Página </p> 
 
    </div> 
 

 
    <div id="content"> 
 
     '.$content.' 
 
    </div> 
 

 
    </body> 
 
</html>

Может кто поможет решить эту проблему проблема? Танки!

источник

2016-01-06 Breno Macena

Можете ли вы дать HTML? И попробуйте изменить высоту: auto в #content – Gregorie

Я изменил высоту на авто и не делаю разницы. –

Если ваш DOMPDF_DPI установлен в 72, то край 180px довольно экспансивный. DPI 72 дает взаимно однозначный перевод из PX в PT (собственный блок в формате PDF). PDF-документы, созданные dompdf, всегда равны 72 PPI. Это означает, что размер содержимого составляет 2,5 дюйма. Я не думаю, что ты собираешься так сильно отнести свои поля.

Другая проблема, которую я вижу, заключается в том, что вы задали условие высоты для вашего элемента контента. Вам это действительно не нужно, и я вижу, что это вызывает некоторые проблемы, поскольку я запускаю некоторые тестовые визуализации. Если вы хотите, чтобы ваш контентный фон имел определенный цвет, я бы рекомендовал установить его в элементе body, который является истинными границами вашего содержимого документа.

Попробуйте следующее:

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

 
body { 
 
    background-color: lightgreen; 
 
    height: 850px; 
 
} 
 
#content { 
 
    padding-left: 10mm; 
 
    padding-right: 5mm; 
 
    line-height: 6mm; 
 
} 
 
#logo { 
 
    height: 4cm; 
 
} 
 
#head_text { 
 
    display: inline-block; 
 
    line-height: 6mm; 
 
    padding-top: 15px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
</head> 
 
<body> 
 
    <div id="header"> 
 
    HEADER 
 
    </div> 
 

 
    <div id="footer"> 
 
    <p class="page">Página </p> 
 
    </div> 
 

 
    <div id="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id erat blandit, auctor massa eu, aliquam lacus. Suspendisse justo ante, gravida vel diam quis, porta luctus nisi. Donec id enim sem. Sed et lobortis magna. Ut et dignissim augue. Cras quam libero, feugiat ac auctor eget, semper a augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse quis hendrerit ex. Phasellus auctor dolor sit amet nibh rhoncus sagittis. Sed quis odio sit amet purus feugiat malesuada.</p> 
 
    </div> 
 
</body> 
 
</html>

источник

2016-01-06 18:50:47 BrianS

Привет, Брайан, спасибо за помощь. Я попробовал ваше предложение, но не работал. Та же проблема происходит. Я использую условие высоты, чтобы попытаться избежать разрыва текста перед местом, где я хочу, чтобы он сломался. Но это не имеет значения. С или без более высокого условия возникает одна и та же проблема. Я действительно не понимаю, почему текст взломается так высоко на странице. –

Цвет фона только для того, чтобы показать, что текст, по какой-то причине, который я не могу понять, не занимает весь div-контент. –

Независимо от высоты вашего div dompdf будет разбита страница в границах страницы. Текст взлома настолько высок из-за полей вашей страницы. Сделайте те меньше, чтобы текст сломался ниже на странице. Если вы хотите увидеть границы страницы, вы можете добавить границу к элементу body. – BrianS

DOMPDF перерыв страницы

ответ

Смежные вопросы