色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

以A4格式打印網頁

CSS
林國瑞2年前7瀏覽0評論

我有一頁很長的文字，大約有4到5頁A4紙。當我在Google Chrome中打印它時，我希望一個圖像正好位于每頁的頂部，另一個圖像正好位于每頁的底部(例如，每個圖像的高度為3厘米)，而這兩個圖像之間的文本在打印時應該距離每頁的頂部4厘米，底部4厘米。到目前為止，我已經編寫了下面的代碼，但是不管圖像的位置如何，文本都出現在圖像的下面，導致一些文本被截斷而無法打印。換句話說，文本沒有考慮上邊距和下邊距。我該如何解決這個問題？

<!DOCTYPE html>
<html>
<head>
    <title>A4 Printable Page</title>
    <style>
        @media print {
            @page {
                size: A4;
                margin: 0;
            }

            body {
                margin: 0;
            }

            .header,
            .footer {
                position: fixed;
                left: 0;
                right: 0;
                color: #ffffff;
                padding: 10px;
                background-color: #000000;
            }

            .header {
                top: 0;
            }

            .footer {
                bottom: 0;
            }

            .header img,
            .footer img {
                height: auto;
                width: 100%;
            }

            .content {
                direction: rtl;
                padding-top: 4cm;
                margin-bottom: 4cm;
                margin-right: 2cm;
                margin-left: 2cm;
                page-break-after: always;
            }


        }
    </style>
</head>
<body>
    <div class="header">
        <img src="/img/prints/header.png" alt="Header Image">
    </div>

    <div class="content">
        <h1>Page 1</h1>
        @for($i=1;$i<=115;$i++)
        <p>Text {{$i}}</p>
        @endfor
    </div>

    <div class="footer">
        <img src="/img/prints/footer.png" alt="Footer Image">
    </div>
</body>
</html>