Cześć,

Zmagam się już dość długo z drukowaniem dokumentu HTML na podstawie zdefiniowanego @media page w CSS'ach.

Mam taki oto arkusz:

body {
	width: 100%;
	height: 100%;
	margin: auto 0px;
	padding: 0px;
	background-color: #FAFAFA;
	font: 12pt "Times New Roman";
}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.page {
	width: 210mm;
	min-height: 297mm;
	padding: 20mm;
	margin: 10mm auto;
	border: 1px #D3D3D3 solid;
	border-radius: 5px;
	background: white;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
	height: 257mm;
}
    
@page {
	size: A4;
	margin: 0;
}

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

	.page {
		margin: 0;
		border: initial;
		border-radius: initial;
		width: initial;
		min-height: initial;
		box-shadow: initial;
		background: initial;
	}
}

Z takim schematem dokumentu (tylko body - reszta nie gra roli):

<body>
	<div class="page">
		<div class="subpage">
			Treść...
		</div>
	</div>
</body>

Dlaczego drukarka usilnie drukuje mi pustą drugą stronę? To jest masakra jakaś :) Próbowałem już zrobić tak jak niżej dla obu .page i niestety nic to nie pomogło:

.page {
	page-break-after: always;
	// ...i tutaj reszta stylów z odpowiedniego `.page`.
}

Jak wreszcie pozbyć się tej pustej kartki? Najśmieszniejsze jest to, że podgląd wydruku nie pokazuje drugiej strony więc tutaj jest tak jak być powinno.

PS: ...bo mnie zaraz krew zaleje hehe.