7

ヘッダー、一部のコンテンツ、およびフッターを含む html ページを作成しました。HTML ページを印刷しようとしたところ、2 ページありました。最初のページにヘッダー、最後のページにフッターを配置しました。

私が本当に必要としているのは、Word 文書のようにすべてのページに表示されるヘッダーとフッターです。

確認したところ、thead と tfoot で表形式を使用すると、それが可能であることがわかりました。firefox と IE では動作しましたが、chrome では動作しません。これは Webkit ブラウザの互換性の問題ですか??

すべてのブラウザと互換性のある他の方法はありますか。

更新: 2021 年 4 月の時点で、バグはまだ未解決ですhttps://bugs.webkit.org/show_bug.cgi?id=17205。以下のSHAKUで言及されているように、https: //stackoverflow.com/a/34884220/2776433

4

4 に答える 4

4

「@print」css メディア スタイル定義を使用して、特に印刷スタイルをターゲットにすることができます。これにより、ドキュメントの印刷時および印刷プレビュー用に厳密に個別のスタイルを作成できます。

これをしっかりとしたベースとして始めます。

    @media print {

    * {
        color: #000 !important;
        -webkit-text-shadow: none !important;
        text-shadow: none !important;
        font-family: "Times New Roman", Times, serif;
        background: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: none!important;
        font-weight: normal!Important;
    }

    header, nav, footer {
       overflow:visible;
    }

    .body {
        width: auto;
        border: 0;
        margin: 0 5%;
        padding: 0;
        float: none !important;
    }


    a, a:link, a:visited {

        &[href]:after {
            content: " (" attr(href) ") ";
            font-size: 90%;
        }

        &[href^="javascript:"],
        &[href^="#"] {
            &:after {
                content: "";
            }
        }
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
于 2013-09-13T18:15:04.427 に答える
2

印刷メディア タイプでアクティブ化する固定配置要素を使用します。

#header, #footer {
     display: none;
}
@media print
{
    #header, #footer {
         position: fixed;
         display: block;
         top: 0;
    }
    #footer {
         bottom: 0;
    }
}

header(ここでは、idとを持つ div 要素があると仮定しますfooter)。

于 2013-09-23T08:05:29.817 に答える
1

上記の回答はどれも、尋ねられた質問に対する実際の回答ではありません。私の経験から、現在利用できる単一のクリーンなソリューションはありません。クロムが意図的にこのバグを回避しているように感じます。https://bugs.webkit.org/show_bug.cgi?id=17205 .

于 2016-01-19T18:22:18.017 に答える