Verteilung divs für nicht überlappende

Ich versuche, eine "A4" HTML als Vorlage für die Speicherung als PDF zu generieren, hat meine Seite 5 divs, die 100% der Fläche zu drucken.Verteilung divs für nicht überlappende

Ich verwende absolute Position für jedes div, aber irgendwie überlappen sie ein wenig, warum das passiert?

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>

Quelle

2016-12-05 BlackBishop

gesetzt Immer top und left Attribute für position: absolute; weil Browser es zu erraten versuchen, und es ist manchmal nicht das, was Sie wollen.

Auch Element tatsächliche Breite besteht aus width + padding, also wenn Sie width: 105mm; padding: 10px; als Ihre tatsächliche Breite eingestellt ist 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>

Quelle

2016-12-05 13:49:07 Justinas

Wie Justinas sagte; Wenn Sie sich Ihren Margin-Top-Wert ansehen, werden Sie feststellen, dass die erste Box tatsächlich um 8px von oben angepasst wurde, da das Body-Tag mit einem Rand von 8px ausgeliefert wird. Dies platziert die Unterseite des Headers div 20mm + 8px von oben und so weiter. – JonasR

Verteilung divs für nicht überlappende

Antwort

Verwandte Themen