title: Sticky Expanding Footer using CSS only (position:sticky)
body: <p>Is it possible to achieve the below layout (sticky footer that expands and scrolls when the user finishes scrolling the content above the footer) using CSS only?</p>
  <p>(Note: my example layout here has a fixed height footer to demonstrate the desired outcome - the point of this questions is to ask whether this can be done with an arbitrary-height footer)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
              margin: 0;
          }
          header {
              position: fixed;
              left: 0;
              right: 0;
              top: 0;
              background: #cfc;
              opacity: 0.5;
          }
  
          article {
              min-height: 100vh;
          }
  
          footer {
              position: sticky;
              background: #fcf;
              bottom: calc(0px - 200px + 30px);
              overflow: hidden;
              height: 200px; /* fixed height for demo purposes, needs to work without this */
          }
  
          footer h3 {
              height: 30px;
              margin: 0;
              background: #ffc;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
      &lt;h1&gt;Header stuff&lt;/h1&gt;
  &lt;/header&gt;
  &lt;article&gt;
      &lt;p&gt;Illo incidunt minus mollitia quod. Eaque earum molestiae necessitatibus, nemo numquam perferendis perspiciatis possimus ut vero! Amet eos excepturi inventore optio porro temporibus vel, velit. Autem dolorum eligendi porro sed.&lt;/p&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet debitis dicta eum, expedita fuga itaque laborum, nesciunt officiis pariatur sapiente, ullam ut. Enim eveniet ipsam labore quod suscipit. Ad cum dolorum ea eaque eos iusto magni, mollitia nisi, nobis nostrum possimus praesentium provident quasi saepe vel, veniam voluptatum? Culpa dignissimos doloremque illo perspiciatis sit! Ad, cumque dolor dolore dolores eveniet exercitationem expedita facilis ipsam itaque iure iusto laboriosam laborum magnam minus neque nostrum perspiciatis quasi quibusdam, quidem repellendus soluta temporibus totam unde? A assumenda aut commodi culpa explicabo facere ipsa nesciunt officia placeat quo repudiandae, vel? Dolorem, esse, voluptates.&lt;/p&gt;
      &lt;p&gt;Debitis ea expedita quibusdam temporibus vel! Ab adipisci deleniti doloremque est et fugit impedit obcaecati repellat sed veniam. A accusamus at commodi dolorem exercitationem hic id inventore iure labore necessitatibus officia perferendis, possimus saepe sint, sit tempore ullam vel veritatis, vero voluptatum! Consequuntur delectus excepturi iusto nemo porro! Accusamus autem blanditiis cum dolorem est ipsam magnam nesciunt, obcaecati provident quas qui repellendus sunt totam vitae voluptatum. Accusamus corporis dolores esse explicabo natus perspiciatis placeat quam! Animi aut consequatur dignissimos dolores doloribus dolorum, ducimus eum fuga harum in itaque laboriosam necessitatibus nobis non placeat possimus provident, quasi quia, quis vero voluptas.&lt;/p&gt;
      &lt;p&gt;Amet architecto consequatur facere in inventore itaque, molestias necessitatibus nisi non nostrum omnis, quas quisquam, quos soluta vero! Accusamus aliquam animi, asperiores assumenda commodi culpa delectus dolore doloremque est eum illo ipsam iusto magni maxime nesciunt non obcaecati omnis perspiciatis, provident quasi quo saepe sit suscipit ut voluptatem! Accusamus eum molestiae quia quidem repellendus? Accusantium ad assumenda at autem blanditiis delectus distinctio ea fugit iure laboriosam, magnam nesciunt nobis numquam praesentium reiciendis sint voluptatem? Alias aliquid, aut distinctio illo ipsam itaque magnam nihil odio perferendis, provident qui quidem, quo repellendus tempore vitae. Aperiam dolorem ipsum molestiae nostrum ratione, suscipit vel.&lt;/p&gt;
      &lt;p&gt;Culpa, esse porro! Aut libero quae rerum ut vitae! Ab assumenda beatae consequuntur, doloremque dolores impedit nihil ratione sunt totam? Aliquam explicabo ipsa mollitia nam officiis pariatur quia. Aliquam beatae deleniti dolor dolorem earum est, expedita fugit illo, ipsa iusto magnam necessitatibus numquam optio perspiciatis possimus quo quod repellat repudiandae sunt, tenetur. Ad amet corporis cupiditate eius inventore numquam odio quidem ratione sed ullam. Accusantium ad, aspernatur at aut autem cumque dignissimos doloremque dolores doloribus eaque eius, itaque laboriosam libero, nihil obcaecati officia perspiciatis praesentium quia quibusdam sit suscipit tempora tempore vel veritatis voluptate. Eligendi fugiat maiores placeat sapiente sed?&lt;/p&gt;
      &lt;p&gt;Atque eaque nulla quo temporibus voluptas. A ad adipisci aperiam autem deserunt dolorem dolorum ducimus enim eum excepturi fuga fugiat, fugit hic ipsum labore laudantium maiores, molestias nam nesciunt odio quae quam quasi repudiandae sequi vero. A at blanditiis cum dolore dolorum eligendi esse facere facilis, harum incidunt ipsam maiores maxime minima minus neque nulla numquam obcaecati quas ratione repellendus similique, veritatis voluptate. Ab, accusamus asperiores harum mollitia possimus quae ullam! Ad alias aliquam, architecto at deleniti dicta doloremque dolorum esse et explicabo hic iure laboriosam maiores maxime neque nisi obcaecati officiis possimus recusandae saepe sapiente temporibus voluptatem. Ab, mollitia?&lt;/p&gt;
      &lt;p&gt;Corporis labore maxime odio quisquam sed! Aliquid deleniti dolor doloribus eligendi est excepturi exercitationem expedita incidunt inventore labore laudantium mollitia nam officiis, praesentium qui quis recusandae sunt suscipit voluptas voluptatibus? Mollitia quas quibusdam recusandae veritatis voluptas. Alias aut, consectetur mollitia perferendis quasi quos recusandae sequi. Accusantium atque facilis itaque mollitia quisquam sunt, ut. Accusantium, assumenda consectetur delectus doloremque, dolorum error esse expedita id maxime non quam quidem similique unde, ut vero voluptas voluptatem. Accusamus alias consectetur consequatur dolores magni natus necessitatibus quas quia voluptatem. Deleniti, facere, veniam. A ad corporis dicta dolores neque nisi perspiciatis possimus quam sequi temporibus. Nulla.&lt;/p&gt;
      &lt;p&gt;Accusamus aperiam architecto asperiores cum et ex expedita facilis impedit iure laborum molestiae mollitia nam, quis quisquam reprehenderit totam voluptas. Accusamus corporis doloremque excepturi modi neque officia, tenetur. Aut cum, distinctio eligendi harum incidunt laboriosam molestias nulla sunt! Ab architecto, aspernatur debitis deleniti dolor doloremque ducimus eaque error eveniet fugiat in labore minus molestiae nemo nisi nostrum nulla, obcaecati placeat quas quia quo reprehenderit, repudiandae sed sint suscipit tempore veniam voluptate. Architecto assumenda autem deserunt ea esse est ex excepturi expedita fuga fugiat harum hic impedit ipsam modi necessitatibus nesciunt nihil obcaecati officiis perspiciatis quam reiciendis sit temporibus, ut voluptatibus!&lt;/p&gt;
      &lt;p&gt;Adipisci aliquam cumque distinctio impedit laboriosam laborum maiores nemo nesciunt nostrum. Dolor dolore eveniet, illum maxime odit quaerat quasi quibusdam quisquam recusandae. Hic nihil possimus quod ut. Animi autem cum delectus deleniti dolore iste minus modi officiis quas reprehenderit, sed sequi vel vitae. Aliquam at delectus deserunt dignissimos dolore eaque enim error explicabo fugiat hic id illo laudantium maxime mollitia natus obcaecati odit pariatur quod quos, repellat repellendus reprehenderit sit suscipit tempore temporibus veniam voluptates? Asperiores cumque doloribus ea eum laborum numquam, odio quo recusandae sapiente sint suscipit temporibus ut voluptas? Blanditiis eum mollitia quis quod quos sit temporibus veritatis.&lt;/p&gt;
      &lt;p&gt;Accusantium ad autem beatae culpa debitis deleniti doloremque est ex fugit, harum in labore maxime, minima nisi odit officiis provident soluta suscipit veritatis voluptatibus! Ab at aut beatae doloremque numquam! Ab, architecto deleniti dicta ea earum est eveniet exercitationem illum ipsam, ipsum itaque labore libero minima modi molestias natus officiis pariatur perferendis placeat quaerat quas rem rerum sit soluta sunt ullam vitae voluptatum? Aliquam aperiam aspernatur corporis cum distinctio dolor ducimus ea esse est illum ipsa ipsum, iusto libero magnam maiores maxime nam nihil non nostrum nulla odio officiis optio perferendis praesentium provident quisquam ratione repudiandae sunt suscipit ut voluptates.&lt;/p&gt;
      &lt;p&gt;Ducimus minima molestias placeat quaerat vel. Ab beatae, doloremque ea eos ex iure iusto labore minus molestiae, nobis numquam perspiciatis praesentium quae quaerat quam sed unde voluptatum. Alias architecto atque aut dolorum, hic tenetur? Ab accusantium aliquid aut debitis deserunt dolore, dolorem earum est eum fugiat illum inventore itaque modi molestiae natus nobis obcaecati quasi quidem quo quos reiciendis, rem reprehenderit repudiandae similique sint, sunt unde ut veritatis vitae voluptatem? Assumenda culpa deleniti facilis maiores nam numquam officia quidem rem reprehenderit, sapiente ullam vel voluptas. Ab accusamus delectus eveniet facilis, fugiat fugit molestiae quisquam ratione veniam veritatis. Cum, quo voluptates.&lt;/p&gt;
  &lt;/article&gt;
  &lt;footer&gt;
      &lt;h3&gt;Footer Stuff&lt;/h3&gt;
      &lt;p&gt;Arbitrary height footer content.&lt;/p&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque obcaecati quae sequi soluta temporibus? Ab, ad eveniet ex itaque quae quo quod repellat similique voluptatum. Culpa cupiditate porro recusandae vel.&lt;/p&gt;
      &lt;p&gt;Animi architecto corporis culpa dignissimos, doloribus ducimus eaque earum exercitationem expedita explicabo facilis id impedit molestiae nobis nulla officiis porro possimus quam, quia quidem quo suscipit tempore totam vitae voluptatem!&lt;/p&gt;
      &lt;p&gt;Beatae commodi deserunt distinctio est eum, ex expedita in incidunt maiores officiis optio quae qui, quidem quo ratione sapiente suscipit? Cumque ea enim explicabo maxime molestias mollitia quod suscipit vero.&lt;/p&gt;
      &lt;p&gt;Illo incidunt minus mollitia quod. Eaque earum molestiae necessitatibus, nemo numquam perferendis perspiciatis possimus ut vero! Amet eos excepturi inventore optio porro temporibus vel, velit. Autem dolorum eligendi porro sed.&lt;/p&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>