CSS Paged Media div Seitenumbrüche auf der nächsten Seite

Ich brauche Ihre Hilfe,CSS Paged Media div Seitenumbrüche auf der nächsten Seite

Ich kann nicht so scheinen, um herauszufinden, warum die div (untere Grenze) bricht auf der nächsten Seite, wenn eine Druckvorschau erfolgt in Internet Explorer 11:

In beiden Fällen, wenn es richtig gemacht werden kann, oder über eine andere Methode, ID ideal, um einen 1px Rand um die Seite (Letter-Größe, 8,5 Zoll x 11,0 Zoll) mit einigen Rändern zu bekommen.

Hier ist der HTML und CSS-Markup in Frage:

<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 
@page { 
    margin: 0.25in; 
} 
html,body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.table { 
    width: 100%; 
    border-collapse: collapse; 
    table-layout: fixed; 
} 
.table td { 
    padding: 0; 
} 
</style> 

</head> 

<body> 


<div style="border:1px solid grey; height: 100%;"> 
<table class="table" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td>File Number:</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
</table> 
</div> 


</body> 

</html>

Quelle

2016-05-10 BobbyJones

Haben Sie aus Neugierde versucht, 'box-sizing: border-box;' dem div hinzuzufügen, um sicherzustellen, dass der Rahmen nicht zur 100% igen Höhe * hinzugefügt * wird? – Quantastical

Das funktioniert auf mysteriöse Weise! Bitte poste das als mögliche Lösung und ich werde es akzeptieren – BobbyJones

Das Problem hat mit dem CSS-Box-Modell zu tun. Standardmäßig werden die Grenzen der außerhalb der Breite/Höhe hinzugefügt, so müssen Sie das ändern Box-Sizing mit dem Grenzkasten, der die Grenzen auf der innerhalb der Breite/Höhe bringt:

<div style="border:1px solid grey; height: 100%; box-sizing: border-box">...

Wenn Sie es nicht in border-box ändern, hat das div eine Höhe von 100% + 2px (1px für den oberen Rand, 1px für den unteren Rand), was den Überlauf auf eine zweite Seite verursacht.

Quelle

2016-05-10 18:46:01 Quantastical

CSS Paged Media div Seitenumbrüche auf der nächsten Seite

Antwort

Verwandte Themen