發佈divs不重疊

我試圖生成一個「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>

來源

2016-12-05 BlackBishop

始終設置position: absolute;top和left屬性，因爲瀏覽器將嘗試猜測它，有時它不是你想要的。

而且元素實際寬度由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>

來源

2016-12-05 13:49:07 Justinas

像Justinas說。如果你看看你的margin-top值，你會發現第一個box實際上是從頂部調整了8px，因爲body標籤帶有margin 8px。這將標題div的底部從頂部放置20mm + 8px，依此類推。 – JonasR

發佈divs不重疊

回答

相關問題