2016-05-10 7 views
3

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.

enter image description here enter image description here

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

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

+0

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

Antwort

2

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.