CSS 在屏幕上模拟纸质页面，但仅显示“可打印区域”在浏览器打印预览上

发布于 2024-12-20 14:09:31 字数 3243 浏览 0 评论 0原文

我成功地创建了一个模拟纸质文档页面的 HTML 页面布局，其中一个白皮书页面在灰色背景上投射阴影，与 Acrobat Reader、MS Word 甚至 Firefox 自己的打印预览可视化非常相似。

我遵循了 SO 中关于正确使用 CSS3 的许多建议（我是一个完全的初学者），最后一个功能是 @media 规则。

所以，我到达了当前文档，其中浏览器的打印预览应仅显示“printable_area”div及其内容，但打印预览显示空白，我不知道我做错了（我使用的是Firefox） :

<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
        <title>A Page to Print</title>
        <style type="text/css">
            @media print {
            html, body, .paperpage {display:none}
            .printable_area * {display:block}
            }

            @media all {
            html, body {
                margin:0; padding:0; height: 100%;
            }
            body {
                background-color: #aaa;
            }

            .paperpage {
                position: absolute;
                width: 600px;
                padding: 20px;
                margin-left: -320px;
                left: 50%;
                top:10px;
                bottom:10px;
                background-color: white;
                box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.8);
                overflow-y: hidden;
            }

            .printable_area {
                position: relative;
                margin: 0 auto;
                height: auto !important;
                min-height: 100%;
            }

            #cabecalho {
                padding: 0;
                height: 100px;
                border-style:solid;
                border-width:1px;
                border-color:black;                
            }

            #main {
                position: absolute;
                top: 100px;
                width: 100%;
            }

            h3 {
                text-align: center
            }

            #rodape {
                position: absolute;
                bottom: 0;
                width: 100%;
                font-weight:bold;
                font-size:50%;
                border-style: solid;
                border-color: black;
                border-width: 1px 0 0 0;
                background-color: hsl(185,60%,90%);
                text-align: center;
            }}
        </style>
    </head>

    <body>
    <div class="paperpage">
        <div class="printable_area">
            <div id="cabecalho" style=" background: -moz-linear-gradient(top, #4DCDD6 0%, #fff 50%);"/>
                <img src="MarcaMiotecNova.svg" height="40%" />
            </div>

            <div id="main">
                <h3>Eletromiografia de Superfície</h3>
                <p align="center">Exame realizado em condições ideais de temperatura e eletrovoltagem.</p>
            </div>

            <div id="rodape">
                <p>My Company</p>
                <p>Address St, 1234 - Don't Drive - Nice City</p>
                <p><a href="http://www.mycompany.com.br">www.mycompany.com.br</a></p>            
            </div>
        </div>
    </div>
    </body>
</html>

任何帮助将不胜感激。

感谢您的阅读！

原文

I have managed to create an HTML page layout that emulates a paper document page, with a white paper page casting a shadow over a gray background, pretty similar to Acrobat Reader, MS Word and even Firefox's very own Print Preview visualization.

I followed a lot of suggestions found in SO about proper use of CSS3 (in which I am a total beginner), and the last feature were the @media rules.

So, I got to the present document, where the browser's print preview should display only the "printable_area" div and its content, but print preview is showing blank, and I don't know that I am doing wrong (I am using Firefox):

<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
        <title>A Page to Print</title>
        <style type="text/css">
            @media print {
            html, body, .paperpage {display:none}
            .printable_area * {display:block}
            }

            @media all {
            html, body {
                margin:0; padding:0; height: 100%;
            }
            body {
                background-color: #aaa;
            }

            .paperpage {
                position: absolute;
                width: 600px;
                padding: 20px;
                margin-left: -320px;
                left: 50%;
                top:10px;
                bottom:10px;
                background-color: white;
                box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.8);
                overflow-y: hidden;
            }

            .printable_area {
                position: relative;
                margin: 0 auto;
                height: auto !important;
                min-height: 100%;
            }

            #cabecalho {
                padding: 0;
                height: 100px;
                border-style:solid;
                border-width:1px;
                border-color:black;                
            }

            #main {
                position: absolute;
                top: 100px;
                width: 100%;
            }

            h3 {
                text-align: center
            }

            #rodape {
                position: absolute;
                bottom: 0;
                width: 100%;
                font-weight:bold;
                font-size:50%;
                border-style: solid;
                border-color: black;
                border-width: 1px 0 0 0;
                background-color: hsl(185,60%,90%);
                text-align: center;
            }}
        </style>
    </head>

    <body>
    <div class="paperpage">
        <div class="printable_area">
            <div id="cabecalho" style=" background: -moz-linear-gradient(top, #4DCDD6 0%, #fff 50%);"/>
                <img src="MarcaMiotecNova.svg" height="40%" />
            </div>

            <div id="main">
                <h3>Eletromiografia de Superfície</h3>
                <p align="center">Exame realizado em condições ideais de temperatura e eletrovoltagem.</p>
            </div>

            <div id="rodape">
                <p>My Company</p>
                <p>Address St, 1234 - Don't Drive - Nice City</p>
                <p><a href="http://www.mycompany.com.br">www.mycompany.com.br</a></p>            
            </div>
        </div>
    </div>
    </body>
</html>

Any help would be much appreciated.

Thanks for reading!

分享到QQ

分享到微博