3
我试图生成一个“A4”的HTML作为以前的模板保存为PDF格式,我的网页有5个div覆盖100%的区域打印。发布divs不重叠
我对每个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>
像Justinas说。如果你看看你的margin-top值,你会发现第一个box实际上是从顶部调整了8px,因为body标签带有margin 8px。这将标题div的底部从顶部放置20mm + 8px,依此类推。 – JonasR