在我的应用程序中，允许用户定义自己的打印页眉和页边距。
对于标题，用户可以提供以下两个字段:
字段(a)和(b)如下图所示:
例如，如果用户提供 (a) 为 10 毫米和 (b) 为 100 毫米，则“标题区域”的高度将为 90 毫米。
现在标题中的内容需要在标题区域的顶部对齐。
有没有办法设置标题区域高度并在此标题区域内顶部对齐内容。
目前，我正在为 做以下工作标题-html 选项:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
border:0;
margin: 0;
padding: 0;
height: 90mm; //in actual program, this is set dynamically in PHP
}
</style>
<script type="text/javascript">
function subst()
{
//process the GET parameters and accordingly set the Header Region text info
}
</script>
</head>
<body onload="subst()">
<div>
//text
</div>
</body>
</html>
margin 最高选项设置为 100mm。
我曾尝试为 body CSS 设置 vertical-align: top，但这也不起作用。
我实现的最终输出似乎没有在顶部或中间垂直对齐标题区域内容。它位于标题区域中间稍上方的某个位置。
最佳答案
编辑 :似乎只有在基于 Windows 的系统中安装 wkhtmltopdf 时才需要此修复程序。
经过大量试验和错误，我观察到以下逻辑似乎有效:
因此，更改后的 html-head 代码(对于上述示例)如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
border:0;
margin: 0;
padding: 0;
height: 120mm;
/*
In the actual program this height is calculated dynamically in PHP as
($headerMargin - $topMargin) * 1.33
*/
}
#master-div
{
overflow: hidden;
height: 100%;
}
</style>
<script type="text/javascript">
function subst()
{
//process the GET parameters and accordingly set the Header Region text info
}
</script>
</head>
<body onload="subst()">
<div id="master-div">
//The actual content goes here
</div>
</body>
</html>
我已经检查了至少 7 到 8 种不同的纸张尺寸(包括设置自定义页面宽度和页面高度。还检查了不同的页眉区域内容大小(从 1 行到 20 行)。
唯一的问题是，这个 1.33 倍标题区域高度的逻辑似乎只有在 Header Margin(b)/Footer Margin 小于或等于纸张高度的三分之一时才有效。如果边距高度超过该值，则内容会随着边距高度的增加而被剪裁。但我想，通常不需要如此大的标题高度。
关于wkhtmltopdf - wkhtmltopdf中页面顶部的标题高度和定位标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15299869/