Running elements
Create custom header and footer for your pages.
Last updated
Create custom header and footer for your pages.
Last updated
When working with and , you may want to add more complex content, such as repeating HTML elements, to your layout. This can be achieved using running elements.
Running elements are HTML elements that are moved out of the content flow and into the page context.
To create a running element, you will need to perform two steps:
First, define which element should be a running element. This is done by using the position property and the running() function. The running() function takes an identifier as an argument, which can be any valid identifier and will be used as the element's id.
Then place a running element in a page margin or page area, you will need to use the content property and the element() function. The element() function takes an identifier as an argument, which should be the same identifier used when defining the running element.
That's all there is to it! Now, the element with the header identifier will be repeated on each page. You can also create additional running elements for other page elements, such as a footer, using the same process.
If you plan on adding a footer element to each page of your paged media using running elements, it is important to make sure that the footer element appears at the beginning of your document flow, rather than at the end. This is because running elements are moved out of the normal content flow and into the page context, and if the content is not present at page generation time, it will not be displayed.