How Can a Variable-Height Sticky Footer Be Defined in Pure CSS

html, body {  height: 100%;}
#headContainer {  background: yellow;  height: 100px;  /* can be variable as well */}
#wrapper {  display: flex;  /* use the flex model */  min-height: 100%;  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */}
#bodyContainer {  flex: 1;  border: 1px solid orange;}
#footContainer {  background: lime;}

<div id="wrapper">  <div id="headContainer">Title</div>  <div id="bodyContainer">Stuff goes here</div>  <div id="footContainer">    Footer<br/>    of<br/>    variable<br/>    height<br/>  </div></div>

CSS Sticky Footers with Unknown Height

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

Summary:

For a site with a header, content area, and footer:

1. Set html, body {height: 100%;}

2. Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;

3. Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;

   The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.

https://jsfiddle.net/0cx30dqf/

How to keep included footer at bottom of short page without min-height, sticky-footer or javascript

I know this post is pretty old, but I found a great resource for this exact thing.

http://ryanfait.com/sticky-footer/

here is just the css:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Good luck.

How to make a sticky footer using CSS?

Following a clean method implemented from an online source no longer available (dead link), the minimum code you should need for your page would be (note - probably best to use #bottom-footer instead of footer #bottom-footer for the selection of your footer - that could be part of the issue):

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

position: sticky' not working when 'height' is defined

The issue here is with height, but not the height you thought about. Let's first start by the definition of the sticky position:

A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.

The important part here is the last sentence which explain that the position sticky will end when the element reach the edge of its containing block and in your case the containing block of the sticky element is the body and you set the body to be height:100% and you are having an overflow of content.

So when setting the height of main to be 92% and the footer to be 8%, you already made the footer at the oppsite edge of its containing block. Here is an illustration where I added a background color to the body so you can clearly see this:

html,body {  height: 100%;  margin: 0;}html {  background:white;}body {  background:blue;}
#main {  height: 92%;}#landing {  display: flex;  align-items: center;  justify-content: center;  height: 100%;  text-align: center;}#landingContent {  width: 20vw;}#footerNav {  height: 8%;  display: flex;  align-items: center;  position: sticky;  top: 0px;  background:red;  color:#fff;}

<div id="main">    <div id="landing">        <div id="landingContent">            <h1 class="logo">Logo</h1>            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>            <button>Button</button>        </div>    </div></div><div id="footerNav">    <div id="footerNavContent">        <h1 class="logo">Logo</h1>    </div></div><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>

var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';

<div>
    <img src="...">
    <footer>caption is variable-size!</footer>
</div>

div {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

img {
  display: block;
  max-width: 100%;
  object-fit: contain;
  flex: 0 1 auto;
  min-height: 0;  /* necessary */
}

footer {
  padding: 10px;
  flex: auto
}