我有一个只有标题的页面:
<body>
<div class="page">
<h1>This is the header</h1>
</div>
</body>
CSS 是:
.page {
height: 297mm;
background-color: #0094ff;
position: relative;
overflow: hidden;
}
h1 {
margin: 0;
padding: 0;
}
当我尝试打印页面时，预览生成 2 页。我只想把它作为一个页面。那么，页面类的高度应该是多少？
我只想将内容打印在 A4 尺寸的页面上。我该怎么做？
最佳答案
重置 html、body 元素的 margin、padding、height
通过将边距和填充归零并将高度设置为 100%，您将实现全页覆盖(不多也不少)。
html, body {
margin: 0;
padding: 0;
height: 100%;
}
更新:
如果将容器元素高度设置为 100%，则无需在 CSS 中为特定页面大小指定高度。
如果页面包含的内容多于一张打印页面无法容纳的内容，并且您想将其剪裁，请将 height: 100% 和 overflow: hidden 应用于您的容器元素— .page 在这种情况下。
.page {
height: 100%;
background-color: #0094ff;
overflow: hidden;
}
如果您想对 .page 元素应用填充并保持单页裁剪，您将需要应用 box-sizing: border-box。
.page {
box-sizing: border-box;
padding: 1em;
height: 100%;
background-color: #0094ff;
overflow: hidden;
}
关于html - 页面/div 的高度应该是多少，以便它只能适合打印的单个页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34268373/