Hello all,

Is there a way to display different header for one loong page? I have a document that structured like below.

<div id="princeheader">
small header here
</div>
<div id="frontcover">
Front cover here (image)
</div>
<div id="header">
BIGGER HEADER HERE
</div>
<div id="content">
... LONG CONTENT HERE ....
</div>

The requirement is
1) Print out the #frontcover as the first page
2) Print out #header & #content on the second page and so on
3) Print out #princeheader for the rest of the page

I tried below solution but it always break the header apart from the content, although I specifically said to avoid page-break-after.

@page {
  size:US-Letter;
  margin:0.25in;
  margin-top:1.25in;
  margin-bottom:0.5in;
  border:none;
  @top { content: flow(docheader)  }
}
@page frontcover { 
	margin:0px;
	@top { content:normal; }
	@bottom { content: normal;}
} 

@page docstart { 
    margin-top:0.125in;
	@top { content:normal; }
}
#frontcover { page-break-after:always; }
#frontcover { page:frontcover; }
#header { page-break-before:avoid;page-break-inside: avoid;page-break-after:avoid !important; }
#header { page:docstart; }
#princeheader { flow: static(docheader) }

Thanks in advance!

Is the "princeheader" div only supposed to occur as a page header after the "content" div? If so, why not move it down after the element?

No, the princeheader div is going to be part of the content div (which can go up to 30 pages long). The difference between #header and #princeheader is that #header will only show up once on page1 of content, #princeheader will show up with the rest of the content page.

Note that before content there is a frontcover, so page:first selector wouldn't work.

The :first page selector can still work if you use it with a named page, eg. @page content:first, and use prince-page-group: start on the content div. That way you can select a different flow for the header on the first page.