铬，打印和百分比div

我正在设计一个简单的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>

字母是所谓的"标准"纸张类型的最小尺寸。不过它比A4宽一点。那么，为什么不将自己限制在字母的高度和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;

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

使用@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>

相关内容

最新更新

热门标签：