divsをオーバーラップさせないで配布する

私は以前にPDFとして保存するためのテンプレートとして "A4" htmlを生成しようとしています。私のページには印刷する領域の100％をカバーする5つのdivがあります。divsをオーバーラップさせないで配布する

私はすべてのdivにposition absoluteを使用していますが、どういうわけかそれらは少し重なっています、なぜそれが起こっていますか？ブラウザがそれを推測しようとするので、

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: 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が言ったようで、width + paddingで構成されています。マージントップの値を見れば、bodyタグに余白8pxが付いているため、最初のボックスが実際に上から8pxに調整されていることがわかります。これにより、ヘッダーdivの下端が上から20mm + 8pxのように配置されます。 – JonasR

divsをオーバーラップさせないで配布する

答えて

関連する問題