印刷ページのフッタ重複コンテンツ

印刷時に「For Official Use Only（FOUO）」と書かれているフッターが含まれる長いHTMLページを作成しようとしています。私はそれをページの一番下に絶対配置しましたが、ページの内容もそれほど下がったり、フッターが重なったりします。私は@mediaプリントCSSを設定しようとしましたが、ページの主な内容はページの高さよりも50ピクセル低くなっていますが、これは何もしません。ここに私のCSSは次のとおりです。印刷ページのフッタ重複コンテンツ

@media print { 
#content { 
    max-height: calc(100% - 50px); 
} 
#printFooter { 
    position: fixed; 
    text-align: center; 
    bottom: 0; 
    margin: 0 auto 0 auto 
}

}

これは次の形式とHTMLファイルを行く：

<body> 
    <div id="content">Lots of text in this div to make it extend beyond first page</div> 
    <div id="printFooter">For Official Use Only (FOUO)</div> 
</body>

誰かが私になるように私のCSSを設定する方法を見つけ出す助けてくださいコンテンツはページの下部に重なって表示されませんか？

クリス

出典

2017-02-16 Chris

あなたは一番下にあるすべての印刷ページの下部にフッター、またはちょうど1つのフッタを取得しようとしているいくつかのテキストを失います最後のページのですか？ – zgood

私によってそれは完璧に動作しますhttps://plnkr.co/edit/wkINSBwXfCWGqi4uwTVd?p=preview –

私はすべての印刷ページの下部にフッターを取得しようとしていますが、動作させることはできません印刷プレビューですべてのページに表示されない場合 – Chris

は、私がこれだけ解決策を見つけたが、我々は（

<body> 
    <div id="content">Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first page</div> 
    <div id="printFooter">For Official Use Only (FOUO)</div> 
</body> 

@media print { 
    #printFooter { 
    position: fixed; 
    text-align: center; 
    bottom: 0; 
    width: 100%; 
    background: #fff; 
    margin: 0 auto 0 auto 
}

出典

2017-02-16 20:07:41 grinmax

これ以外の場合は、印刷バージョンで表示されるいくつかのdivを制御し、余分な埋め込みを行います – grinmax

私は上記のコードを1回追加してみました。私は、メディアプリント内のコンテンツセクションに境界及びパディングを追加しました： [コード] @mediaプリント{ \t \t \t \t #content { \t \t \t \t \tパディング底：は50px。 \t \t \t \t \t border-bottom：1px solid; \t \t \t \t} \t \t \t \t #printFooter { \t \t \t \t \t位置：固定。 \t \t \t \t \t text-align：center; \t \t \t \t \t bottom：0; \t \t \t \t \t幅：100％; \t \t \t \t \t背景：#fff; \t \t \t \t \tマージン：0自動0オート \t \t \t \t} \t \t \t} [/コード] 私は、各ページの下部にフッターを取得していますが、最初のページに、それが重なってテキストの最後の行の中央。そして境界線は第2ページにのみ現れます。 – Chris

印刷ページのフッタ重複コンテンツ

答えて

関連する問題