2016-05-10 8 views
3

私はあなたの助けが必要へのdiv改ページ、インターネットエクスプローラで11:CSSページ媒体、次のページ

どちらかといえば、適切に実行できれば、いくつかの余白を付けて、ページの周りに1pxの境界線(レターサイズ、8.5インチx 11.0インチ)を表示するのが理想的です。ここで

enter image description here enter image description here

問題のHTMLとCSSのマークアップです:

<!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

境界線が100%の高さに追加されていないことを確認するために、好奇心を持たずにdivにbox-sizing:border-box;を追加してみましたか? – Quantastical

+0

それは神秘的に動作します!可能な解決策として投稿してください – BobbyJones

答えて

2

問題は、CSSボックスモデルに関係しています。あなたは、幅/高さの内に国境を置く境界ボックスにボックスサイズを変更する必要があるので、デフォルトでは、境界は、幅/高さのに追加されます。

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

ボーダーボックスに変更しないと、divは100%+ 2px(上端は1px、下端は1px)の高さを持ち、2番目のページにオーバーフローします。

関連する問題