On my page I have some content loaded from my database. All this content is placed inside a DIV, nicely styled with images, font styles and background image. I want the visitor to be able to print this content without losing the styles.
I get everything to work nicely, except for the pagebreak. Somehow whatever I try, there’s always a small space placed beneath every div that makes my DIV result in a position slicely lower that it’s previous. In other words: the more page’s the content needs, the more of the DIV is cut into half and shown on the next page. See below for an illustration of my problem.
The CSS
[code]@media all {
.page-break {
display: none;
}
.wrapper_programmaker:after {
padding-top: 70.71%;
display: block ;
content: ‘’;
}
}
@media print {
.page-break {
display:inline-block; page-break-after: always;
}
.wrapper_programmaker:after {
padding-top: 70.71%;
margin-bottom: -0.9%;
display:block;
content: ‘’;
}
}
.main_programmaker {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: #282828;
font-family: ‘Frutiger’, sans-serif;
}[/code]
The PHP
[code]
<div class="wrapper_programmaker">
<div class="main_programmaker" style="background-image:url(../images/BG.jpg); background-repeat:no-repeat; background-size:contain;">
//way more divs and content that are irrelevant for this question
</div>
</div>
And the JS
function printDiv(printableArea) {
var printContents = document.getElementById('printableArea').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}