Can one replicate website page-footer options in a standalone HTML doc?

[jack-davison]

Description

In Quarto websites, you can easily create lovely footers using simple syntax:

---
website:
  page-footer:
    center: 
      - text: "About"
        href: about.qmd
      - text: "License"
        href: license.qmd
      - text: "Trademark"
        href: trademark.qmd
---

Is it possible to do something similar to page-footer in a standalone HTML report? Obviously not linking to other QMD files as there'll only be one by definition, but if I just wanted to author a self-contained HTML report with my company logo and socials at the bottom similar to https://colorado.posit.co/rsc/tay-swift-tour/#curtain-call how would I go about doing that?

[mcanouil]

Not natively.
You'll have to include your footer for example using include-after-body.

[jack-davison]

Thanks for the reply.

I've tried to synthesize this and the discussion at #6305.

qmd

---
title: "Untitled"
format:
  html:
    include-after-body: footer.html
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

Content.

footer.html

<div id="quarto-content" 
  class="quarto-container page-columns page-rows-contents page-layout-article page-navbar" 
  style="min-height: calc(-120px + 100vh);">
<footer class="footer">
  <div class="nav-footer">
    <div class="nav-footer-left">
      &nbsp;
    </div>   
    <div class="nav-footer-center">Footnote content</div>
    <div class="nav-footer-right">
      &nbsp;
    </div>
  </div>
</footer>
</div>

This gets me close, but there's a massive gap from the fixed min-height:

Is there a way to recreate the javascript calculations Quarto does to ensure that the footer is always at the bottom?

[mcanouil]

What do you mean by JavaScript calculation?

Here you need to understand the structure of the page and where you are inserting the elements, then it's all about HTML/CSS which are better explained elsewhere.

---
title: "Untitled"
format: html
include-in-header:
  text: |
    <style type="text/css">
    .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      text-align: center;
    }
    </style>
include-after-body:
  text: |
    <footer class="footer">Footnote content</footer>
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

Content.

A page with a footer.

If you want to copy Quarto code, then dive into the codebase: https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/projects/website/navigation/quarto-nav.scss

[jack-davison]

I was specifically referring to the JS talked about at #6305 (comment) which ensures that the footer is always at the bottom, but I can see your example doesn't need any of that, thanks!