Webページの印刷と余白の設定のフッタの追加

Question

印刷時にすべてのページにわたって繰り返されるフッターをHTMLページに追加します。私はこのコードを介してこれを達成するために管理している：

@media print { 
    p.note { 
     bottom: 0; position: fixed; 
    } 
} 

しかし、今、私はこの段落は、コピー

このMirosoft articleよるの残りの部分の上に行くのに問題があり、これがために働く必要があります私：

@page :first { 
    margin-bottom: 4in; 
} 

しかし、それは何も変更されません...任意のアイデアですか？

Answer 1

ここで働いていた解決策があります：

@media print { 
    p.note { 
     display:block; 
     bottom:0; 
     position:fixed; 
     font-size:11px; 
    } 
} 

<div id="content"><p>Lorem Ipsum Latin et cetera</p></div> 
<p class="note">Footer</p> 

をあなたはこのようないくつかのCSSをしたいと思います

そして、すべてがこのCSSで別のdivに含まれる必要があります

#wrapper { 
    position:relative; 
    bottom:1in; 
    margin-top:1in; 
    width:974px; 
    margin:0 auto; 
} 

これは完全に機能しました！

Answer 2

Zインデックスの追加についてはどうですか？フッターが最後の段落 はまた、メインのコンテンツのコンテナは、フッターのための部屋を作ることを確認してください

@media print { 
    p.note { 
     bottom: 0; position: fixed; 
margin-top:10px; 
    } 
} 

Answer 3

を使用しようとするよりも優先されますようです。例えば、あなたのマークアップはこのようなものに見える場合：CSSはこれで、

#content {margin-bottom:4in}