-4

レッスンを含むページがあり、このページを印刷したいのですが、印刷モードですべてのページに (現在のレッスン名、現在のレッスン作成日) を含むすべてのページにフッターを追加したいと考えています。

<html>
<head>
<style>
.footer {
    display:none;
}
@media print {
.Lesson
{
page-break-after:always;
}
.footer {
    display:Block;
}
}
</style>
</head>
<body>
<div id="lesson1" class="Lesson">
lesson text
<div id="print-footer print-footer1" class="footer">footer 1 content</div>
</div>
<div id="lesson2" class="Lesson">
lesson text
<div id="print-footer print-footer2" class="footer">footer 2 content</div>
</div>
<div id="lesson3" class="Lesson">
lesson text
<div id="print-footer print-footer3" class="footer">footer 3 content</div>
</div>
<div id="lesson4" class="Lesson">
lesson text
<div id="print-footer print-footer4" class="footer">footer 4 content</div>
</div>
</body>
</html>
4

3 に答える 3

0

これは素晴らしい方法ではありませんが、うまくいくでしょう。次のように、必要なすべてのフッター DIV をすべてのページに追加できます。

<div class="print-footer print-footer1">footer 1 content</div>
<div class="print-footer print-footer2">footer 2 content</div>
<div class="print-footer print-footer3">footer 3 content</div>
<div class="print-footer print-footer4">footer 4 content</div>
<div class="print-footer print-footer5">footer 5 content</div>

次に、CSS を使用してそれらを非表示にします。

.print-footer {
    display:none;
}

次に、各ページの BODY タグに次のようにクラスを追加します。

<body class="lesson1">
<body class="lesson2">
<body class="lesson3">
<body class="lesson4">
<body class="lesson5">

そして、その BODY クラスを使用して印刷するときに正しいフッターを表示します。

@media print {

body.lesson1 .print-footer1 {
    display:block;
}

body.lesson2 .print-footer2 {
        display:block;
}

body.lesson3 .print-footer3 {
        display:block;
}

body.lesson4 .print-footer4 {
        display:block;
}

body.lesson5 .print-footer5 {
        display:block;
}

}
于 2012-12-24T10:22:33.777 に答える