Я создаю некоторый контент с помощью HTML / CSS, и при предварительном просмотре в диалоговом окне принтера только первые страницы выглядят «хорошо».
Вторая и последующие страницы имеют начальный пробел в верхней части, которыйвыталкивает содержимое на две страницы.
Кто-нибудь знает, что это может быть?
Вот код:
Просто поместите это в.html файл и откройте в Chrome и "Print-Preview" его.
<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>