Print CSS Div pro Seite und dynamischer Länge

Hallo zusammen,
ich habe ein Problem:
Und zwar habe ich eine dynamische Seite die per php generiert wird mit unterschiedlicher Inhaltsmenge.

Die Seite soll als A4 gedruckt werden. Nun habe ich das Problem, dass ich ein div habe, wo der Inhalt drinne steht. Padding:2cm. Wunderbar.
Nur wenn der Inhalt über eine Seite hinausgeht, passen die paddings nicht mehr. Logischer Weise, da der bottom erst auf der nächsten Seite ist und der top auf der ersten Seite.
Wie bekomme ich es hin, dass das div nach Seitenende automatisch abgeschlossen wird und ein neues div aufgemacht wird?
height:29.7cm geht nicht, da der Text da uU nicht reinpasst.

Irgendeine Kombination aus display und p vielleicht? Oder muss ich irgendwie die Höhe vom div berechnen und dann ggf ein neues div "auf machen"? Habe etwas über calc gelesen. Oder php/js?
Problem ist, dass die divs >1 also ab Seite 1 unterschiedlich formatiert werden sollen.
Geht sowas wie

if($calcheight>n*297) echo "</div><div class="inhalt">;  

n wäre dann die Anzahl der Seiten. Das müsste dann n Mal passieren. Also bei 4 Seiten 3x. Aber das kling t arg kompliziert.
Irgendwelche Ideen?
Gruß
tsunami

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 494151

Url: https://administrator.de/contentid/494151

Ausgedruckt am: 21.11.2024 um 21:11 Uhr

8 Kommentare

Neuester Kommentar

Wie bekomme ich es hin, dass das div nach Seitenende automatisch abgeschlossen wird und ein neues div aufgemacht wird?

Überflüssig.
Dafür gibt's die Media Styles für den Print
https://www.mediaevent.de/css/pagedmedia.html

@page { margin: 2cm }

Das bringt mir nichts, weil ich dann die Elemente nicht bündigt positionieren kann. Dann müsste ich sowas wie position:absolute; top:-2cm; nehmen.
Ich möchte zB einen Hintegrund einbinden oder ein Logo bündig zum Seitenrand.

Zitat von @tsunami:

Das bringt mir nichts, weil ich dann die Elemente nicht bündigt positionieren kann. Dann müsste ich sowas wie position:absolute; top:-2cm; nehmen.

?? Nö.

Ich möchte zB einen Hintegrund einbinden oder ein Logo bündig zum Seitenrand.

Hindert dich ja keiner dran. Entsprechende Regeln nur für den Print und feddich, sehe das Problem nicht.

Aber wie???
Wenn das div größer ist als A4, also 21 cm gibt eine neue Seite. Ok. Dann sind aber die Seitenränder oben (2. Seite) bzw. unten (1.Seite) weg.
So und wenn ich dann Seite 1 Rahmen rot haben möchte und die folgenden Seiten blau gestrichelt, geht es nicht, weil es ein großes div ist.
Oder wird das div automatisch durch den media print abgeschlossen und neu gemacht?

Zitat von @tsunami:

Aber wie???
Wenn das div größer ist als A4, also 21 cm gibt eine neue Seite. Ok. Dann sind aber die Seitenränder oben (2. Seite) bzw. unten (1.Seite) weg.

Nein! Die page Direktive sorgt ja gerade dafür das die Ränder auf den Seiten eingehalten werden müssen.

So und wenn ich dann Seite 1 Rahmen rot haben möchte und die folgenden Seiten blau gestrichelt, geht es nicht, weil es ein großes div ist.
Oder wird das div automatisch durch den media print abgeschlossen und neu gemacht?

Der Page-Style sorgt dafür das die Seitenabstände eingehalten werden, hier werden keine neuen DiVs erstellt, der Browsert vermittelt den Abstand passend.
Wenn du natürlich nicht alle Elemente im Printstyle richtig formatierst passt halt es Ende nichts. Du musst hier immer zweigleisig denken, das eine ist der Style für die Darstellung auf eine, digitalen Endgerät, der andere PrintStyle für den Druck und da musst du alle eventuellen Container mitbrachten und entsprechend im PrintStyle formatieren.

Ich weiß ja nicht was du da veranstaltest aber hier geht das einwandfrei. Du hast da vermutlich einen wilden Mix aus padding und margin verbaut und siehst nun das verhunzte Ergebnis.

Hi,
ich habe mal zwei Bilder gemacht. Die Streifen und das Logo sind jeweils der gewünschte Hintergrund (A4). Damit will ich es flexibel halten. Natürlich wäre es in diesem Fall eifacher den blaueb Streifen und das Logo manuell ein zu binden.
Aber generell möchte ich einfach ein Bild scanen und als Background setzen, mit der Option ab Seite 2 einen anderen Hintergrund zu nehmen.
Wenn ich die Inhalte in ein Div packe und das div erstreckt sich über mehr als eine Seite, passen die Abstände nicht mehr. Weil natürlich das div nur die Abstände innerhalb verarbeitet und der Seitenumbruch ist ja quasi mittendrin.
Ich brauche keine Browserausgabe, nur Druck!
@media wird nicht unterstützt. Sobald ich das nehme wird das ganze css ignoriert.
Ohne Media geht es, nur wenn ich die page auf 2cm setze und dann in dem div einen Hintergrund einfüge, das div mit top:0px ganz nach oben setze, wird mir das Hintergrundbild abgeschnitten. Dompdf 0.83
Was ich also bräuchte wäre sowas wie:

if(div > 21cm) echo "text</div><div>  
else
echo </div>

Oder ich müsste generell einen Header definieren, der einfach nur Freiraum schaft, wo ggf Logo etc reinkommen kann (aus dem Hintergrundbild). Ansonsten kein Inhalt.
Ich hoffe ich konnte es nun deutlich machen.

@page {
    size: A4;
    margin-top:0;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    padding: 0;
  }
  body {
    font-family: helvetica !important;
    font-size: 10pt;
    position: relative;
  }
  #overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url("mainimages/ersteseite.png"); 
    background-position: center top;
    background-repeat: no-repeat;  
    z-index: -1;
}
  #content{
    padding: 3.5cm 3.5cm 5.00cm 3.50cm;
  }

<?php    require_once 'dompdf/autoload.inc.php';  
use Dompdf\Dompdf;
use Dompdf\Options;

$options = new Options();
$options->set('defaultFont', 'Tahoma');  
$dompdf = new Dompdf($options);
$html="<!DOCTYPE html><html><head><title>peep</title>";  
  include("./maincss/abc.php");  
   $html.=$css_print.'</head><body><div id="page-body">  
<div id="overlay">  
</div>
<div id="content">  
<p>long text</p>
</div></div>
</body>
</html>';  
$docname="Peter.pdf";  
$dompdf=new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
@$dompdf->stream($docname);
// echo $html;
?>

Nun habe ich tatsächlich mal

@page {
    size: A4;
    margin-top:2cm;
    margin-bottom:2cm;
    margin-left:2cm;
    margin-right:2cm;
    padding: 0;
  }
  body {
    font-family: helvetica !important;
    font-size: 10pt;
  }
  #overlay {
    position: fixed;
    top: -2cm;
    left: -2cm;
    height: 100%;
    width: 100%;
    background-image: url("mainimages/ersteseite.png"); 
    background-position: center top;
    background-repeat: no-repeat;  
}:

gesetzt und bekomme anliegenden Fehler. Trotz 100%. Der Hintergrund wird unten abgeschnitten, nicht widerholt und rechts auch gekappt.
Zusätzlich habe ich testweise height:90% genommen und auch height:21cm. Mit top:0cm; rutsch der Hintergrudn 2cm nach unten, wird trotzdem abgeschnitten...

Was nun tatsächlich passt, ist der Seitenabstand nach dem Umbruch. Statt height habe ich auich 21 cm und testweise 19cm genommen. Und auch ein p statt div. Kein befriedigendes Resultat.

Keine eine Lösung?