CSS DIN A4. Soll nur eine Seite dargestellt werden -> kommt eine zweite Leere.

Rockhound · 7. Januar 2016

Hallo Forum und entschuldigung für den Titel... da fiel mir nix besseres zu ein.
Als erstes mal der Code für EINE SEITE:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
	<title>DIN A4</title>
	<link href="print.css" rel="stylesheet">
</head>
<body>
	<div id="printbutton" onClick="javascript:window.print()">DRUCKEN</div>
	<div id="dina4">
  	  <div class="text">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
	  </div>
	</div>
</body>
</html>

Und hier das passende CSS-Schnipsel

HTML:

@page {
   size: A4;
   margin: 0;
}

@media print {
   html, body {
   width: 210mm;
   height: 297mm;
}

#printbutton {
   display: none;
}

#dina4 {
   position: relative;
   width: 210mm;
   height: 297mm;
}
}
@media only screen {
#dina4 {
   padding: 20px;
   width: 800px;
   border: 1px solid #000;
}

#printbutton {
   border: 1px solid #000;
   padding: 5px;
   cursor: pointer;
   width: 100px;
   text-align: center;
   margin-bottom: 20px;
}
}

Das ganze könnt Ihr Euch auch hier ansehen: www.pauernet.de/index.html [EINE SEITE]
Hier dann auch der Fehler: Es entsteht eine zweite leere Seite beim drucken die so nicht gewollt ist.

Jetzt aber das merkwürdige:
Erstelle ich zwei Seiten wie hier z.b.

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
	<title>DIN A4</title>
	<link href="print.css" rel="stylesheet">
</head>
<body>
	<div id="printbutton" onClick="javascript:window.print()">DRUCKEN</div>
	<div id="dina4">
	   <div class="text">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
	   </div>
	</div>
	<div id="dina4">
	   <div class="text">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
	   </div>
	</div>
</body>
</html>

zu sehen hier: www.pauernet.de/index2.html [ZWEI SEITEN]
Dort macht er mir jetzt beim drucken schön zwei Seiten ohne eine dritte leere Seite hinzuzufügen. Also alles bestens.

Wieso klappt das ganze aber nicht nur mit einer Seite? Wieso kommt da beim drucken eine zweite leere?

Etwas Hintergrund: Später werden "Mahnungen" aus einer Datenbank gelesen und im HTML aufgebaut. Jede Mahnung wird dann einzeln auf eine Seite gedruckt. Funktioniert schon alles perfekt... bis auf das wenn man eine Mahnung ausdrucken möchte ein zweites leeres Blatt erscheint.

FranzvonAssisi · 7. Januar 2016

Klappt bei mir, wo druckst du denn? Ich benutze gerade Edge.

Lg, Franz

Jesterfox · 7. Januar 2016

Ich habs jetzt nicht ausgedruckt aber mir fällt auf das Body ein Margin von 8px hat, das könnte zu der 2. Seite führen (abhängig von druckbaren Bereich auf einer Seite, die ja vom Drucker abhängt)

Noch n Tipp: "dina4" sollte auch eine CLass sein da es mehrfach vorkommt, IDs müssen eindeutig sein.

Rockhound · 7. Januar 2016

@Jesterfox: Das war es.

HTML:

@media print {
html, body {
width: 210mm;
height: 297mm;
margin:0;
}

Jetzt geht es. Vielen lieben Dank Dir.

@FranzvonAssisi
Hatte das Problem im Chrome-Browser.

Jesterfox · 7. Januar 2016

Dürfte wie gesagt vom Drucker und dessen Seiteneinrichtung abhängen, je nach dem ob 297mm + 16 Pixel auf die Seite passen oder nicht...

Das mit der id / class würd ich noch korrigieren, auch wenns der Browser meistens ~~richtig~~ wie gewünscht macht sollte man sich nicht drauf verlassen.

Suche

CSS DIN A4. Soll nur eine Seite dargestellt werden -> kommt eine zweite Leere.

Rockhound

Lt. Commander

FranzvonAssisi

Admiral

Jesterfox

Legende

Rockhound

Lt. Commander

Jesterfox

Legende

Ähnliche Themen