英文:
CSS print shows white Bar
问题
这是HTML和CSS通过Python（cgi、jinja2、weasyprint）创建的PDF模板，用户可以通过网站上的按钮下载。HTML部分如下：
<body>
<div id="ticket"></div>
</body>
CSS部分如下：
body {
margin: 0;
padding: 0;
height: 82mm;
width: 203mm;
background: red;
}
#ticket {
height: 82mm;
width: 203mm;
background-color: red;
margin: 0 auto;
}
@page {
size: 203mm 82mm;
margin: 0;
padding: 0;
}
如果遇到打印预览中出现奇怪的边框，你可以参考上述的HTML和CSS代码，看看是否有错误。
英文:
I'm trying to create an ticket width the dimensions (203mmx82mm). This is in HTML and CSS via python (cgi, jinja2, weasyprint) the template will be converted to an pdf, which the user can download via a button on the website.
The HTML Body:
<body>
<div id="ticket"></div>
</body>
And my CSS:
body{
margin: 0;
padding: 0;
height: 82mm;
width: 203mm;
background: red;
}
#ticket{
height: 82mm;
width: 203mm;
background-color: red;
margin: 0 auto;
}
@page{
size: 203mm 82mm;
margin: 0;
padding: 0;
}
I've chosen red to see it better. Even when the Body has the same color as the ticket, I still get an odd border in the printpreview (see Image blow)
The white bar is also seen on the actual pdf.
Can anyone help me?
答案1
得分: 0
以下是翻译好的内容：
默认页面边距通过将@page规则的margin属性设置为0来移除。类似于此，要移除body元素的默认边距，需要将body规则的margin属性设置为0。通过这样做，您应该确保您的票据填满整个页面，白色的边栏消失了。
此外，您可以考虑将#ticket元素的box-sizing属性设置为border-box，这会将填充和边框包括在元素的总宽度和高度中，因此您不必担心它们影响票据的整体尺寸。以下是您的CSS代码，带有以下更改：
@page {
margin: 0;
}
body {
margin: 0;
padding: 0;
height: 82 mm;
width: 203 mm;
background: red;
}
#ticket {
height: 82 mm;
width: 203 mm;
background-color: red;
margin: 0 auto;
box-sizing: border-box;
}
希望这对您有帮助。
英文:
The default margins on the page are removed by setting the margin attribute of the @page rule to 0. Similar to this, removing the default margins from the body element requires setting the margin property of the body rule to 0. By doing this, you should guarantee that your ticket fills the whole page and that the white bar is gone.
Additionally, you can think about setting the #ticket element's box-sizing attribute to border-box, which includes the padding and border in the element's total width and height so you won't have to worry about them influencing the ticket's overall dimensions. Here is your CSS changed with the following changes:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@page {
margin: 0;
}
body {
margin: 0;
padding: 0;
height: 82 mm;
width: 203 mm;
background: red;
}
#ticket {
height: 82 mm;
width: 203 mm;
background color: red;
margin: 0 auto;
box-sizing: border-box;
}
<!-- end snippet -->
答案2
得分: 0
在删除以下内容后：
@page{
size: 203mm 82mm;
margin: 0;
padding: 0;
}
并重新启动计算机后，我重新插入了这段代码。现在它可以正常工作。
英文:
After deleting the
@page{
size: 203mm 82mm;
margin: 0;
padding: 0;
}
and a pc restart i inserted agian the snippet. It works now.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论