Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

is there a way to add a header and footer on each page? #14

Open
rafaelsanchezrd opened this issue Mar 19, 2022 · 4 comments
Open

is there a way to add a header and footer on each page? #14

rafaelsanchezrd opened this issue Mar 19, 2022 · 4 comments
Labels
enhancement

Comments

@rafaelsanchezrd
Copy link

Nice template,
is there a way to add a header and footer on each page?
@ocram
Copy link
Contributor

ocram commented Mar 19, 2022

Thanks!

Good question. Yes, this is possible, and quite easily, even.

First, define your header and footer elements after the opening <body> tag like this:

<div id="pageHeader">My header ...</div>
<div id="pageFooter">My footer ...</div>

Now, the ideal way would be to assign position: running(...) to them in CSS and use them somewhere via content: element(...). But as is often the case, support for these parts of the specification in web browsers, e.g. Chrome and Firefox, is poor to non-existent.

Luckily, there’s a simple workaround. Just use the following CSS instead:

#pageHeader {
    position: fixed;
    top: 0;
}
#pageFooter {
    position: fixed;
    bottom: 0;
}

The downside? This will only work in print mode, not screen. So perhaps consider hiding the two elements in @media screen and showing them only in @media print.

Perhaps we’ll add something like this to the examples as well. Let’s keep this issue open until then.

@aghaynes
Copy link

aghaynes commented May 6, 2022

This is a cool template...

How do you stop the header and footer from overlapping with the body? Currently the header/footer is on top of the body...
grafik

@ocram
Copy link
Contributor

ocram commented May 10, 2022

@aghaynes It looks like there is sufficient space in your case to move the header upward and the footer downward, right? Did you check the margin and padding of your header/footer elements? Apart from that, you could then set a fixed height and use an overflow value.

@aghaynes
Copy link

Thanks @ocram. I've played around with margin and padding but was unsuccessful (maybe I changed the wrong one(s)). I think the issue is rather that I have just one long page div and the fixed header/footer. When it breaks the page, the header/footer are then placed on top of the page div...

e.g.

<div id="pageHeader">My header ...</div>
<div id="pageFooter">My footer ...</div>
<div class="page">
really long content that spans 2 or more pages... 
</div>

It seems to work with

<div id="pageHeader">My header ...</div>
<div id="pageFooter">My footer ...</div>
<div class="page">
content for page 1
</div>
<div class="page">
content for page 2
</div>

But that breaks the flow of the document and requires specific input on where to break pages... is there a way to close the div and open a new one automatically for the rest of the content if it's already full? (and also puts the page number (senso #17) perhaps, maybe thats easier in the footer though...)

Sorry if thats a stupid question - i'm pretty new to css and html...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ocram @rafaelsanchezrd @aghaynes