How does Quarto position the footer?

[dense-set]

Description

Hi. I was wondering how Quarto ensures that the footer is always at the bottom of the webpage. I couldn't find any CSS rules in the generated site_libs/bootstrap/bootstrap.min.css that ensure this.

Here is a concrete minimal example:

_quarto.yml:

project:
  type: website

website:
  title: "Quarto lab"
  navbar:
    left:
      - href: index.qmd
        text: Home
  
  page-footer: Footnote content

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

index.qmd:

---
title: "Quarto lab"
---

Main content.

The relevant portion of the generated index.html just before </body>:

<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>

However, I couldn't find anywhere in bootstrap.min.css that ensures that the above chunk actually appears at the page's bottom. (I checked all the CSS rules that contained the keyword nav-footer.)

What am I missing?

[dragonstyle]

If you're talking about how we 'force' the footer to be at the bottom of the page even when the content is smaller than the viewport, we're actually doing that by increasing the content area using the min-height style:

<div id="quarto-content" 
  class="quarto-container page-columns page-rows-contents page-layout-article page-navbar" 
  style="min-height: calc(-120px + 100vh);">

We compute that styling using javascript (to determine the height of the footer), so you won't see it in the HTML source, but will see it in the computed HTML in the inspector.

HTH!

[epatters]

Is it possible to disable this behavior? I am embedding Quarto output into a larger website and this custom resizing is causing me troubles.

[mcanouil]

You can use JavaScript (maybe CSS also).