Question
Is it possible to suppress a footer from appearing on the last page of a prince-page-group?

Current Output:
http://screencast.com/t/Y2YxODg4YmMt

Here's a snippet of the current CSS I'm using:

div.map { prince-page-group: start }

@page map {
  @top-left {
  content: string(maptitle, first) ", Continued";
  font-size: 1.2em;}
  
  @bottom-right {
  content:"Continued on next page";
  font-size: .8em;
  font-style: italic;
  }
}

@page map :first {
  @top-left {
  content: normal;
  }
}

@page map :last {
  @bottom-right {
  content: normal;
  }
}

one solution that comes to my mind is to use a hidden tag with a specific id at the end of your docuemnts that can be used to to name the page and then hide the footer for that particular named page. here is the code

At the end of document add: 
<div id="document_finished"></div>

CSS:
#document_finished {
  page: last_page;
}

@page last_page { 
@bottom-right {
 content: normal;
 }
}

Thanks Allen. Trying your suggestion...

I was able to suppress the header on the first page of a prince-page-group with

@page map :first {
  @top-left {
  content: normal;
  }
}

I'm not sure why this doesn't suppress the footer on the last page of a prince-page-group:

@page map :last {
  @bottom-right {
  content: normal;
  }
}

There is no :last page class at the moment, as it can create very tricky situations. For example, a style sheet could change the margins on the last page so that not much text fits on it. But if text overflows to the next page, then it will not be the last page any more. Awkward!

Okay - so as a workaround I am experimenting with Allen's suggestion.

I've adjusted the HTML generated to include a <hr /> at the end of a Map. Semantically, it makes sense to have a line completing a topic.

<div class= "map">
   <div class = "fact">
   <h6>My block label</h6>
      <p>My block content</p>
   </div>
   <p></p>
   <div class = "concept">
   <h6>My block label</h6>
      <p>My block content</p>
   </div>
   <hr />
<div>

Since the <hr /> is always the last element I tried
- using it as a selector
- naming the page it occurs in
- suppressing the footer.

Result: No luck - creates a new page with the horizontal line...

I think the only way to reliably inhibit the header or footer on the last page of the document is to flow an empty element there. This means that you need to use flows for all the headers and footers, are you familiar with this?

Thanks Mike, I'm not really aware of flows for headers and footers so please fill me in!

Our document structure is as follows

<div class = "chapter">
  <h1>Chapter title</h1>
</div>
<div class ="overview">
  <h1>Overview title</h1>
</div>
<div class= "map">
   <h1>Map title 1</h1>
   <div class = "fact">
      <h6>Block label</h6>
           <p>Block content goes here</p>    
     </div>
     <p> </p>
     <div class = "concept">
       <h6>Block label</h6>
           <p>Block content goes here</p>
      </div>
      <p> </p>
</div>
<div class= "map">
   <h1>Map title 2</h1>
   <div class = "fact">
      <h6>Block label</h6>
           <p>Block content goes here</p>    
     </div>
     <p> </p>
     <div class = "concept">
       <h6>Block label</h6>
           <p>Block content goes here</p>
      </div>
      <p> </p>
</div>

A document may divided into Parts, Chapters and Sections. If it has less than 9 Maps, it will only contain Maps. Each document division starts with an Overview, which introduces the Maps that follow.

Maps are containers of Blocks. When a Map cannot fit on a single page it continues to the next page. The reader is aware of a Map breaking by the footer, which says "continued". On the next page is the Map title, with the word ", Continued" appended to it.

Here is an example of flowing a h1 heading element up to the page header:

@page { 
    @top { content: flow(header) }
}
h1 { flow: static(header) }

This will take the element out of the normal flow, and can be used to define more complex headers and footers, eg. containing tables, images, or mixed text styles.

If you use flows to create the page header, then you can later flow an empty element to the header on the last page of the document.

You can suppress a footer from appearing on the last page of a prince-page-group with this CSS trick :

div > :nth-last-child( 1 )::after
{
  string-set: footer_page_nb "";
  content: "";
}

You can test it with the attached file.

Nicolas

1. index.html‎ 21.9 kB ‎
   Suppress Footer on Last Page

Edited 14 Jul 2014 by nico

We have a similar question with our implementation.
Footer is implemented using flow:

.footer {
    flow: static(footer);
}

@media print {
    @page {
        @bottom {
            content: flow(footer);
        }
    }
}

Under some circumstances, footer needs to be hidden in second pass of the two pass solution process.

I tried to create named page from document content container div, and to flow empty div / empty string in the @bottom section of last named page, using @page named-page:nth-last-of-type(1) selector, but this selector doesn't work.

How exactly can last page of the document be detected, so that we can implement as suggested:


Thanks
Sanja

Edited 3 Jul 2018 by Sanja

You could do something like this:

body::after {
    content: "";
    flow: static(footer)
}

Thanks, that worked