html - Adding footer for printing web pages and setting margins

Question

I want to add a footer to an HTML page that will be repeated across all pages WHEN PRINTING. I have managed to achieve this through this code:

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

But now I have a problem with this paragraph going on top of the rest of the copy enter image description here

According this Mirosoft article, this should work for me:

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

But it doesn't, it doesn't change anything... any ideas?

score 3 · Accepted Answer

機能したソリューションは次のとおりです。CSSは次のとおりです。

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

そして、この CSS を使用して、すべてを別の div に含める必要があります

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

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

score 1 · Accepted Answer

z-index を追加するのはどうですか？フッターが最後の段落をオーバーライドするようですまた、使用してみてください

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

score 1 · Accepted Answer

メインコンテンツのコンテナにフッター用のスペースがあることを確認してください。たとえば、マークアップが次のようになっているとします。

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

次のような css が必要です。

#content {margin-bottom:4in}

4 に答える 4