Html 标题显示在每一页中_Html_Css

Html 标题显示在每一页中

html css

Html 标题显示在每一页中,html,css,Html,Css,我正在尝试使用DOMpdf创建pdf。以下脚本是我正在尝试创建的pdf，当我获得pdf时，它看起来就像我在下面发布的图像：（请检查）现在我的问题是页眉显示在每一页上，而我的内容的文本通过页脚部分。我只想让页眉在第一页，页码在每页页脚的位置。我把事情搞砸了将近24小时，但还是没能实现你能帮我解决这个问题吗提前谢谢 <html> <head> <style> @page { size: auto; /* auto is the in

我正在尝试使用DOMpdf创建pdf。以下脚本是我正在尝试创建的pdf，当我获得pdf时，它看起来就像我在下面发布的图像：（请检查）

现在我的问题是页眉显示在每一页上，而我的内容的文本通过页脚部分。我只想让页眉在第一页，页码在每页页脚的位置。我把事情搞砸了将近24小时，但还是没能实现

你能帮我解决这个问题吗

提前谢谢

 <html>
 <head>

 <style>
    @page {
   size: auto;   /* auto is the initial value */
   margin: 10%;
 }

#header { position: fixed; left: 0px; top: -100px; right: 0px; height: 120px; background-color: orange; text-align: center; }
#footer { position: fixed; left: 0px; bottom: -180px; right: 0px; height: 150px; background-color: white; }
#footer .page:after { content: counter(page, upper-roman); }
#content{height:600px;}

</style>

 <body>

 <div id=\"header\">
 <h1>Widgets Express</h1>
</div>
 <div id=\"footer\">
<p class=\"page\">Page </p>
 </div>


<div id=\"content\">


<table style=\"table-layout:fixed;width:600px;\">
<tr height=\"30\">
<td width=\"150\">CSS table layout cell 1</td>
<td width=\"200\">CSS table layout cell 2</td>
<td width=\"250\">CSS table layout cell 3</td>

 </tr>


 </table>


 <p style=\"page-break-before: always;\">the second page</p>
 </div>
</body>
</html>


@页面{
大小：auto；/*auto是初始值*/
利润率：10%；
}
#标题{位置：固定；左侧：0px；顶部：-100px；右侧：0px；高度：120px；背景色：橙色；文本对齐：中间；}
#页脚{位置：固定；左侧：0px；底部：-180px；右侧：0px；高度：150px；背景色：白色；}
#页脚。页码：{内容：计数器（页码，上罗马）；}
#内容{高度：600px；}
Widgets Express
第页
CSS表格布局单元1
CSS表格布局单元2
CSS表格布局单元3
第二页之前的分页符：始终；\“>

之所以发生这种情况，是因为您对页眉和页脚使用了“位置：固定”

对于页眉，请使用：

#header { position: absolute; left: 0; top: 0; right: 0; height: 120px; }
body { padding-top: 120px; }

至于分页，我不太确定在css中是否可以这样做

编辑：

更改页眉和页脚脚本将起作用：

#header { position: absolute; left: 0; top: -100px; right: 0; height: 100px;background-color: orange; text-align: center;  }

 #footer {position: fixed ; left: 0px; bottom: -110px; right: 0px; height: 40px; background-color: orange; }

为什么你的报价上都有反斜杠？谢谢你的回复。我以前应该提过的。。。实际上，我是在PHP标记中编写上述代码的，这就是为什么我的引号上都有反斜杠。我将所有这些代码放入一个php变量中以创建PDF。谢谢你的回复。我尝试了绝对，但第一页的内容进入了页眉，第二页的内容从中间位置开始。。你能告诉我如何解决这个问题吗？谢谢：）如果您删除位置规则，并坚持默认的静态位置，它应该可以解决您的问题。但是，不确定如何处理分页#页眉{高度：120px；背景色：橙色；文本对齐：居中；}页脚{高度：150px；背景色：白色；}非常感谢kontur。我厌倦了位置：绝对，然后将顶部改为->顶部：-100，现在去掉了页眉，但仍然是页脚上的内容文本。（请检查我上面贴的图片中的第一个箭头。）你有什么解决办法吗？谢谢：）嗨，我有办法了。我用这个-#footer{位置：固定；左：0px；底部：-110px；右：0px；高度：40px；背景色：橙色；}更改了我的页脚CSS，现在它工作得很好。：）好的，很高兴能帮上忙。顶部：-100px做同样的事情，只是向外推标题而不是向内推内容-只要页面周围有足够的空间就可以了，）