I'm creating some content with HTML/CSS and when previewing it in the printer dialogue, only the first pages looks "good".
The second and subsequent pages have an initial space in the top that pushes the content to two pages.
Does anyone have a clue what this might be?
Here's the code:
Just put that in a .html file and open in Chrome and "Print-Preview" it.
<html>
<head>
<meta charset="UTF-8" />
<style>
html{font-family: Avenir-Book;}
h1{font-size: 16px;}
@page {size: A3; margin: 0mm 0mm 0mm 0mm;}
@media print {
.month{
page-break-after: always;
}
}
.header{-webkit-print-color-adjust: exact;height: 30%;background-color: red !important;}
.content{-webkit-print-color-adjust: exact;height: 70%;background-color: blue !important;}
table{table-layout: fixed;height: 100%;width: 100%;}
.header h1{color: #74cc82;position: relative;transform: translateY(-50%);-webkit-transform: translateY(-50%);top: 50%;font-size: 1200%;}
tr{height: 40px;}
th{font-size: 175%;}
td{font-size: 400%;text-align: center;}
th, td{color: #1a4567;}
td:last-child, th:last-child{color: #74cc82;}
</style>
</head>
<body>
<div class="month" style="background-color: red;" >
<div class="header" >
<h1 align="center" >
Janvier
</h1>
</div>
<div class="content" >
<table>
<tr>
<th>L</th>
<th>M</th>
<th>M</th>
<th>J</th>
<th>V</th>
<th>S</th>
<th>D</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
</div>
<div class="month" style="background-color: red;" >
<div class="header" >
<h1 align="center" >
Janvier
</h1>
</div>
<div class="content" >
<table>
<tr>
<th>L</th>
<th>M</th>
<th>M</th>
<th>J</th>
<th>V</th>
<th>S</th>
<th>D</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
</div>
</div>
</body>
</html>
