2016-12-05 61 views
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>

回答

1

始终设置position: absolute;topleft属性,因为浏览器将尝试猜测它,有时它不是你想要的。

而且元素实际宽度由width + padding,所以当你设置width: 105mm; padding: 10px;比你的实际宽度为105mm + 20px

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; 
 
    top: 0; 
 
    left: 0; 
 
    width: 210mm; 
 
} 
 
.area50 { 
 
    font-size: 9px; 
 
    padding: 10px; 
 
    text-align: justify; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    width: 99mm; 
 
    height: 98mm; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
}
<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>

+1

像Justinas说。如果你看看你的margin-top值,你会发现第一个box实际上是从顶部调整了8px,因为body标签带有margin 8px。这将标题div的底部从顶部放置20mm + 8px,依此类推。 – JonasR