决定用HTML和CSS制作我的简历，但我在设置页面大小方面遇到了问题。我把所有的内容都包装在一个div标签中，这个标签的目的是模拟A4 PDF的大小。每当我打印页面时，右侧就会溢出。我正在学习如何在这个项目中使用CSS网格，我听说它在尝试打印时并不总是很好。
150 PPI屏幕的A4纸尺寸是1240 x 1754，所以这就是我设置的.pagediv的高度和宽度。我用的是"另存为pdf"设置内置到谷歌浏览器查看HTML作为PDF
HTML:
<body>
<div class="page">
<div class="page-top">
[insert content]
</div>
<div class="line">
<hr>
</div>
<div class="page-left-col">
[insert content]
</div>
<div class="page-right-col">
[insert content]
</div>
</div>
</body>
CSS:
.page {
display: grid;
width: 1240px;
height: 1754px;
grid-template-rows: 20% 1% 79%;
grid-template-columns: 35% 65%;
grid-gap: 25px;
font-family: Rubik;
font-weight: 400;
background-color: lightgray;
font-size: 18px;
}
.page-top {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
margin: 96px 96px 0px 96px;
}
.line {
grid-column: span 2;
margin: 0px 96px 0px 96px;
}
.page-left-col {
margin: 0px 0px 96px 96px;
}
.page-right-col {
margin: 0px 96px 96px 0px;
}
边距设置为模仿普通word文档中的一英寸边距。
我也使用CSS网格显示在其他几个嵌套div在我的页面，如果需要，我可以提供更多的上下文在那里。但我不认为它们应该影响任何东西，因为它们的大小受到父div.page的限制，除非我试图将页面打印为pdf，否则它们不会溢出。
对于HTML-to-print转换来说，这不是一个好的起点，PDF本质上是打印的。
what to do (intermediate)
- 删除页面 的大小限制
- wkhtml……有一个叫变焦的开关，1.5应该是合适的值来填充页面
- 使用
page-size: a4;(默认pdf页面大小)
该怎么做("right")
- 删除body的尺寸限制
- 用html元素和建立背景边框(黑色的)CSS样式
- 避免定义"宽度";这些规则。你只需要这么做定义"宽度";一次，所有其他宽度应设置为"auto"
- 高度将被证明是麻烦的，因为潜水高度只有它们的内容要求。但设置高度:100%不尊重
- 的黄色十字也可以在css中设计，或者更高决议png和jpeg
- 只使用"real"维度。这意味着不要用像素，要用点，可以使用%值，但要确保这些值是%值的实维(这意味着在某一点上父元素