Question

我试图生成一个＆＃34; A4＆＃34; html作为模板之前保存为PDF格式，我的页面有5个div，覆盖了100％的打印区域。

我对每个div使用绝对位置，但不知何故它们重叠了一点，为什么会发生？

＆＃13;

 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;
        }

＆＃13;

<!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>

＆＃13;

Answer 1

始终为top设置left和position: absolute;属性，因为浏览器会尝试猜测它，有时它并不是您想要的。

元素实际宽度也包含width + padding，因此当您设置width: 105mm; padding: 10px;而不是实际宽度为105mm + 20px

时

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

分配不重叠的div

1 个答案: