0

我正在设计一个简单的 html 页面，其唯一目的是打印。我不在乎它在屏幕上的外观，但它必须在单页（A4 或字母）上和任何浏览器上打印。因此，我需要使用仅具有百分比大小的 div。

以下骨架代码的问题在于，在 Chrome 打印预览中，两个单词都显示在第一行，与网页中显示的内容相反。我在 FF 和 IE 中没有遇到这个问题。

<!DOCTYPE html>

<html>

<head>
    <style type="text/css">
    html, body, div, p, span { margin:0px;padding:0px; }
    html, body { width:100%;height:100%;min-height:100%;}
    </style>
</head>

<body>

    <div style="height:70%;">
      first
    </div>

    <div style="height:30%;">
      second
    </div>

</body>
</html>
4

2 回答 2

1

Letter is the smallest size of the so to say "standard" paper types. It is a little wider than A4 though. So why not constrain yourself to the height of Letter and the width of A4? You'll want to incorporate some margin space anyways, which should account for a a good portion of width differences.

To that end, what about switching from percentages to actual inches or even millimeters (more precise). CSS does support these units.

For example calculate your 70% of page size in millimeters for the tallest paper size you support and the smallest paper size you support. Lets use Letter and A4. So 70% of 279mm (Letter) = 195.3 rounded down (safer) to 195. So put min-height: 195mm; Then for A4 70% of 297 = 207.9 rounded down = 207 so max-height: 207mm;

Calculating for 30%...

min-height: 83mm;
max-height: 89mm;

Seems sound to me, not sure why it wouldn't work?

于 2013-01-31T21:56:07.680 回答
0

使用@media 打印，检查 css 媒体类型以及如何使用它。例如这里是编写的示例，您可以删除仅为测试添加的边框。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    @media screen {
    html, body, div, p, span { margin:0px;padding:0px; }
    html, body { width:100%;height:100%;}
    div.first {height:70%; width:100%;   }
    div.second {height:30%; width:100%; }
    }
    @media print {
    html, body, div, p, span { margin:0px;padding:0px; }
    html, body { width:100%;height:100%;}
    div.first {height:70%; width:100%; border:1px solid red; display:block;   position:fixed; top:0; left:0;  }
    div.second {height:30%; width:100%; border:1px solid blue; display:block; position:fixed; bottom:0; left:0; }

    }
    </style>
</head>
<body>
    <div class="first">
     first
    </div>
    <div class="second">
      second
    </div>
</body>
</html>
于 2013-01-31T21:39:01.517 回答