当前位置:网站首页>浏览器打印边距,默认/无边距,占满1页A4
浏览器打印边距,默认/无边距,占满1页A4
2022-07-06 09:28:00 【梦想身高1米8】
长页面打印的时候,分页是通过给每页内容的外层div设置高度实现的,以达到一页内容刚好占据1页A4纸。
(至少我遇到的情况是这样)
但是,如何设置宽高以及边距,真是个讲究活。
1 设置宽高为210mm*297mm
<html>
<head>
<style> body {
margin: 0; } div {
width: 210mm; height: 297mm; } div:nth-of-type(1) {
background-color: cadetblue; } div:nth-of-type(2) {
background-color: blueviolet; } </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
210*297mm是A4纸的尺寸,但是如果加上打印默认的边距,效果就有点不对劲了。
如果这个边距不是必要的,那么可以考虑去掉边距。
@media print {
// 媒体查询,打印时样式生效,不用也可以
@page {
// 用于在打印文档时修改某些 CSS 属性
margin: 0;
}
}
}
或者打印设置里改成无边距(不推荐这种办法,需要客户多干一个步骤,不如设置css直接)
如果一定要边距,那么设置宽高的时候,就把边距减掉。
<html> <head> <style> body {
margin: 0;
}
div {
width: 190mm;
height: 277mm;
}
div:nth-of-type(1) {
background-color: cadetblue;
}
div:nth-of-type(2) {
background-color: blueviolet;
}
@media print {
@page {
margin: 10mm;
}
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
细看其实分页有一丝丝错位,不知道为啥。
以及,既然在css中设置了边距,就不要去调整浏览器打印边距,样式会乱。
设置宽高为a:b
px
在无边距时,这个a:b
=210:297
就能达到占满a4纸的效果了
(其实就是a4纸的比例了)
<html>
<head>
<style> body {
margin: 0; } div {
width: 1024px; height: 1448px; } div:nth-of-type(1) {
background-color: cadetblue; } div:nth-of-type(2) {
background-color: blueviolet; } @media print {
@page {
margin: 0mm; } } </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
1024:1448差不多就是A4纸的比例了。
无边距时,宽高比需要调试。
<html>
<head>
<style> body {
margin: 0; } div {
width: 1024px; height: 1471px; } div:nth-of-type(1) {
background-color: cadetblue; } div:nth-of-type(2) {
background-color: blueviolet; } @media print {
@page {
margin: 20px; } } </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
1024:1471
是调整出来的,我也不知道要怎么算。
边栏推荐
- 【练习-8】(Uva 246)10-20-30==模拟
- Codeforces Round #801 (Div. 2)A~C
- 【练习-1】(Uva 673) Parentheses Balance/平衡的括号 (栈stack)
- Raspberry pie csi/usb camera uses mjpg to realize web camera monitoring
- Codeforces Round #799 (Div. 4)A~H
- B - Code Party (girls' competition)
- QT有关QCobobox控件的样式设置(圆角、下拉框,向上展开、可编辑、内部布局等)
- Penetration test (2) -- penetration test system, target, GoogleHacking, Kali tool
- Maximum product (greedy)
- [exercise-6] (UVA 725) division = = violence
猜你喜欢
渗透测试 ( 7 ) --- 漏洞扫描工具 Nessus
Information security - threat detection - detailed design of NAT log access threat detection platform
7-1 understand everything (20 points)
Openwrt source code generation image
Codeforces Round #799 (Div. 4)A~H
MySQL import database error [err] 1273 - unknown collation: 'utf8mb4_ 0900_ ai_ ci’
Penetration test (2) -- penetration test system, target, GoogleHacking, Kali tool
Read and save zarr files
渗透测试 ( 1 ) --- 必备 工具、导航
Web based photo digital printing website
随机推荐
frida hook so层、protobuf 数据解析
socket通讯
渗透测试 ( 8 ) --- Burp Suite Pro 官方文档
Codeforces Round #802(Div. 2)A~D
Opencv learning log 29 -- gamma correction
QT按钮点击切换QLineEdit焦点(含代码)
【练习-11】4 Values whose Sum is 0(和为0的4个值)
Shell Scripting
Sword finger offer II 019 Delete at most one character to get a palindrome
力扣:第81场双周赛
Analysis of protobuf format of real-time barrage and historical barrage at station B
Analyse du format protobuf du rideau en temps réel et du rideau historique de la station B
Vs2019 initial use
D - function (HDU - 6546) girls' competition
Penetration test (3) -- Metasploit framework (MSF)
pytorch提取骨架(可微)
【练习-9】Zombie’s Treasure Chest
【练习-3】(Uva 442)Matrix Chain Multiplication(矩阵链乘)
分享一个在树莓派运行dash应用的实例。
滲透測試 ( 1 ) --- 必備 工具、導航