我正在尝试生成一个"A4" html作为保存为PDF的模板,我的页面有5个div覆盖了印刷区域的100%。
我为每个div使用绝对定位,但它们似乎有一点重叠,这是为什么?
我为每个div使用绝对定位,但它们似乎有一点重叠,这是为什么?
body {
background: rgb(204,204,204);
}
page[size="A4"] {
background: white;
width: 210mm;
height: 297mm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
body, page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
.area100{
border:1px solid black;
position:absolute;
width:210mm;
}
.area50{
font-size:9px;
padding:10px;
text-align: justify;
border:1px solid black;
position:absolute;
width:105mm;
height:98mm;
overflow:hidden;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<page size="A4">
<div id="header" class="area100" style="height:20mm;">
This is header
</div>
<div id="main" class="area100" style="height:129mm; top: 20mm;">
This is main
</div>
<div id="bottom-left" class="area50" style="top: 149mm">
{agreement}
</div>
<div id="bottom-right" class="area50" style="left:105mm; top: 149mm">
right
</div>
<div id="footer" class="area100" style="top: 247mm; height:50mm">
This is footer
</div>
</page>
</body>
</html>