[R] Add a footer to the outside of rmarkdown html main-container

Normally, in the html output of an Rmarkdown document, the <body>...</body> tag encloses a <div>...</div> with class ‘main-container’ which hold the main content. When one add a footer with the following YAML header, it will appear at the bottom of the page as expected:

1
2
3
4


output: 
  html_document:
    includes:
      after_body: resource/footer/banner.html

However, this may lead to problems when the main-container is in a frame or a mini-page: the added footer will fill to the width of the frame, but not to the width of the page.

To have a footer to fill the full width of a page, one has two options: one is to modify the Rmarkdown template used for building output, and the other is to use javascript to arrange the page component. Here, I will demonstrate the second option, and readers can click here for more details on the first option.

1
2
3


$(function() {
  $('.main-container').after($('.footer'));
})

The above javascript will put components with `class=“footer”' after the class ‘main-container’.

To have the footer in the right place, we also need set up css rules:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 70px; # leave space for the footer
}
.footer {
  position: absolute; # keep it always at bottom
  bottom: 0;
  width: 100%;
  height: 70px;
  padding: 10px 5px;
  background: yellow;
}

Now let’s add a footer using custom block:

1
2
3
4


::: {.footer}
A footer created with Javascript
[Contact](mailto:zhangz.sci@gmail.com)
:::

Alternatively, one can use htmltools::includeHTML(file) to add raw html code if the footer is stored in a file.

😄 👏

References

Discussion of this topic at github: https://github.com/rstudio/rmarkdown/issues/1761

Last modified on 2021-06-06