Considering following argonDash app:

library(shiny)
library(argonDash)
n=3
ui <- argonDashPage(
  title = "argonDash Footer Example",
  author = "Author",
  description = "Example of placing the footer at the bottom of the viewport",
  navbar = argonDashNavbar(),
  sidebar = argonDashSidebar(
    vertical = FALSE,
    id="sidebar"
  ),
  body = argonDashBody(
    tags$head(
      tags$style("
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  padding: 0px 100px 20px 20px; /* Adjust padding as needed */
  text-align: center;
}")
    ),
    map(1:n,~argonCard(
      title = "Main Content",
      width = 12,
      p("This is the main content area. The footer will stay at the bottom of the viewport.")
    ))
  ),
  footer =  argonDashFooter(
    copyrights = "My copyrights",
    src = "www.google.com",
    argonFooterMenu(
      argonFooterItem(actionLink(inputId = "Private", label = "Private"))
    )
  )
)
server <- function(input, output, session) {}
shinyApp(ui, server)

I can use custom css to postion the footer at the bottom of the page using position: fixed; bottom: 0;. But when increaseing the content by changing n=12 then the content is scrolled behind the footer. How to change the css that the footer comes after the content but stays at the bottom of the viewport when the content is not filling the full page?