CSS Sticky Footers with Unknown Height

.wrapper{  position: relative;  height: 205px;  width: 200px;}.scroll{  border: 1px solid red;  overflow-y: scroll;  height: 100%;  width: 100%;   display:flex;  flex-direction: column;}.content{  background-color: #ccc;  flex:1;
}.footer{  background-color: #efefef;
}

<h1> little content</h1>
<div class="wrapper">  <div class="scroll">    <div class="content">    Lorem ipsum dolor sit amet    </div>    <div class="footer">    This must stick to the bottom until .content is too long, then go below it    </div>  </div></div>

<h1> large content</h1>
<div class="wrapper">  <div class="scroll">    <div class="content">    1. Lorem ipsum dolor sit<br>    2. Lorem ipsum dolor sit<br>    3. Lorem ipsum dolor sit<br>    4. Lorem ipsum dolor sit<br>    5. Lorem ipsum dolor sit<br>    6. Lorem ipsum dolor sit<br>    7. Lorem ipsum dolor sit<br>    8. Lorem ipsum dolor sit<br>    9. Lorem ipsum dolor sit<br>    10. Lorem ipsum dolor sit<br>    11. Lorem ipsum dolor sit<br>    12. Lorem ipsum dolor sit<br>    13. Lorem ipsum dolor sit<br>    </div>    <div class="footer">    This must stick to the bottom until .content is too long, then go below it    </div>  </div></div>
<h1> large content with large footer</h1>
<div class="wrapper">  <div class="scroll">    <div class="content">    1. Lorem ipsum dolor sit<br>    2. Lorem ipsum dolor sit<br>    3. Lorem ipsum dolor sit<br>    4. Lorem ipsum dolor sit<br>    5. Lorem ipsum dolor sit<br>    6. Lorem ipsum dolor sit<br>    7. Lorem ipsum dolor sit<br>    8. Lorem ipsum dolor sit<br>    9. Lorem ipsum dolor sit<br>    10. Lorem ipsum dolor sit<br>    11. Lorem ipsum dolor sit<br>    12. Lorem ipsum dolor sit<br>    13. Lorem ipsum dolor sit<br>    </div>    <div class="footer">    This must stick to the bottom until .content is too long, then go further down<br>    Some additional content    </div>  </div></div>

Full height content block width sticky footer

You are so close ... just need to change the value from height , what you need is to set the min-height :

.container {
     min-height: 100%;

Updated Fiddle

Bonus:

To keep the content all visible you can use padding on the container = to the height of your footer and header:

    .container {
        min-height: 100%;
        background:red;
        width:1280px;
        margin:0 auto;
        position: relative;

        /*Use box-sizing to include the values of the padding on the 100% min-height*/
        box-sizing:border-box;
        /*Padding for bottom and top = to the height of your elements footer-header*/
        padding: 135px 0;
    }

2nd Demo Fiddle

css - relative header and sticky footer, dynamic content, unknown height, all in a container with responsive width?

jsBin demo

HTML:

<div id="view">
  <div id="appear"> Content that appears </div>
  <div id="header"> Header </div>
  <div id="content"> <h1>Content</h1> <p>Lorem ipsum...</p> </div>
  <div id="footer"> Footer </div>
</div>

CSS3:

using calc() which currently has a very good xBrowser support: http://caniuse.com/#search=calc

#view {
  overflow: hidden;           /* NO SCROLLBARS */
  margin: 0 auto;
  background-color: #000;
  color:#fff;

  width: 100vw;
  max-width: 350px;
  height: 100vh;
}
#appear{
  display:none;
}
#header,
#footer {
  height: 44px;               /* note this */
  background-color: #555;
}
#content {
  overflow-y: scroll;         /* SCROLLBARS !!!*/
  height: calc(100% - 88px);  /* 44+44 = 88px */
}

and finally

jQuery:

$("#view").on("click", "#header", function () {
  var $appear = $('#appear');
  var io = this.io ^= 1; // Toggler

  $appear.show();               // Temporarily show
  var animH = $appear.height(); // Get height and
  if(io) $appear.hide();        // fast hide.
  $appear.slideToggle();        // Now do it with animation

  $('#content').animate({       // Animate content height
      height: (io?"-=":"+=")+animH
    },{
      step: function() {
        $(this).css("overflow-y", "scroll");
      },
      complete : function(){
        var h = 88 + (io?animH:0); // header+footer = 88px
        $(this).css({height: "calc(100% - "+ h +"px)"});
      }
   });
});

To explain the beauty above:

the trick is to set a fixed height to header and to Footer,
than using calc(100% - 88px) for the scrollable content you get the needed space.

On jQuery animate you just quickly get the Appearing Top content height and apply it to the calc() magic in jQuery.

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>

.my_content {
  min-height: calc(100vh - 140px);
}