Question

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

以下框架代码的问题在于，在Chrome打印预览中，第一行显示2个单词，与网页中显示的内容相反。我在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>

Answer 1

字母是所谓“标准”纸张类型的最小尺寸。它虽然比A4宽一点。那么为什么不把自己限制在Letter的高度和A4的宽度？无论如何，您都希望合并一些边距空间，这应该占据宽度差异的很大一部分。

为此，如何从百分比切换到实际英寸甚至毫米（更精确）。 CSS确实支持这些单位。

例如，计算您支持的最高纸张尺寸和支持的最小纸张尺寸，以毫米为单位的70％页面尺寸。让我们使用Letter和A4。所以279mm（字母）= 195.3的70％向下舍入（更安全）到195.所以把min-height: 195mm;然后换成A4 70％的297 = 207.9向下舍入= 207所以max-height: 207mm;

计算30％......

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

似乎听起来对我说，不知道为什么它不起作用？

Answer 2

使用@media print，检查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>

Chrome，打印和％div

2 个答案: