当前位置:网站首页>Browser print margin, default / borderless, full 1 page A4
Browser print margin, default / borderless, full 1 page A4
2022-07-06 16:14:00 【Dream height 1.8 meters】
When printing long pages , Paging is done by giving each page an outer layer div Set the height to achieve , So that one page of content just occupies 1 page A4 paper .
( At least this is what happened to me )
however , How to set width, height and margin , What a job .
1 Set the width and height to 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 yes A4 The size of the paper , But if you add the default print margin , There is something wrong with the effect .
If this margin is not necessary , Then consider removing the margin .
@media print {
// Media query , The style takes effect when printing , It's not necessary
@page {
// Used to modify certain when printing documents CSS attribute
margin: 0;
}
}
}
Or change the print setting to borderless ( This method is not recommended , The customer needs to do one more step , It's better to set css direct )
If the margin is necessary , When setting the width and height , Just reduce the margin .
<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>
Look closely, there is actually a slight dislocation in the paging , I don't know why .
as well as , Since the css Margins are set in , Don't adjust the print margin of the browser , The style will be messy .
Set the width and height to a:b
px
When there is no margin , This a:b
=210:297
Can achieve full a4 The effect of paper
( In fact, that is a4 The proportion of paper )
<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 Almost A4 The proportion of paper .
When there is no margin , The aspect ratio needs debugging .
<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
It is adjusted , I don't know how to calculate .
边栏推荐
- Codeforces Round #799 (Div. 4)A~H
- Codeforces Round #801 (Div. 2)A~C
- Is the sanic asynchronous framework really so strong? Find truth in practice
- 日期加1天
- 快速转 TypeScript 指南
- Configuration du cadre flask loguru log Library
- Problem - 922D、Robot Vacuum Cleaner - Codeforces
- [exercise 4-1] cake distribution
- C language learning notes
- PySide6 信号、槽
猜你喜欢
C language learning notes
第 300 场周赛 - 力扣(LeetCode)
Information security - threat detection - Flink broadcast stream broadcaststate dual stream merging application in filtering security logs
Analysis of protobuf format of real-time barrage and historical barrage at station B
Codeforces Round #802(Div. 2)A~D
QT有关QCobobox控件的样式设置(圆角、下拉框,向上展开、可编辑、内部布局等)
b站 实时弹幕和历史弹幕 Protobuf 格式解析
1855. Maximum distance of subscript alignment
window11 conda安装pytorch过程中遇到的一些问题
“鬼鬼祟祟的”新小行星将在本周安全掠过地球:如何观看
随机推荐
Gartner: five suggestions on best practices for zero trust network access
1903. Maximum odd number in string
Codeforces - 1526C1&&C2 - Potions
Vs2019 initial use
Codeforces Round #803 (Div. 2)A~C
New to redis
Flask框架配置loguru日志库
Codeforces Round #798 (Div. 2)A~D
1005. Maximized array sum after K negations
1529. Minimum number of suffix flips
Penetration test (2) -- penetration test system, target, GoogleHacking, Kali tool
QT有关QCobobox控件的样式设置(圆角、下拉框,向上展开、可编辑、内部布局等)
Information security - threat detection - Flink broadcast stream broadcaststate dual stream merging application in filtering security logs
860. Lemonade change
TCP's three handshakes and four waves
Classic application of stack -- bracket matching problem
[exercise-1] (UVA 673) parentheses balance/ balanced brackets (stack)
Radar equipment (greedy)
E. Breaking the Wall
Effet d'utilisation, déclenché lorsque les composants de la fonction sont montés et déchargés