Мне удалось создать макет HTML-страницы, который имитирует страницу бумажного документа, с белой страницей, отбрасывающей тень на серый фон, очень похожей на Acrobat Reader, MS Word и даже собственную визуализацию предварительного просмотра печати Firefox.
Я следовал многим предложениям, найденным в SO, о правильном использовании CSS3 (в котором я новичок), и последней функцией были правила @media.
Итак, я добрался до настоящего документа, где предварительный просмотр печати браузера должен отображать только div "printable_area" и его содержимое, но предварительный просмотр печати показывает пустое, и я не знаю, что я делаю неправильно (я использую 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>
Любая помощь приветствуется.
Спасибо за чтение!
}}
) опечаткой или присутствует в вашем реальном CSS? - person David says reinstate Monica   schedule 11.12.2011#rodape
и@media all
. - person Marcel Korpel   schedule 11.12.2011