仅用CSS实现可展开粘性页脚（position:sticky）可行吗？

需求说明 #

能否仅使用CSS实现以下布局：粘性页脚在用户滚动完上方内容区域后展开并支持滚动？（注：原示例采用固定高度页脚演示效果，核心诉求是实现支持任意高度的此类页脚）

实现代码 #

CSS 代码

body {
    margin: 0;
}
header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: #cfc;
    opacity: 0.5;
    z-index: 100;
}
/* 避免顶部内容被固定header遮挡 */
article {
    min-height: 100vh;
    padding-top: 60px;
}
footer {
    position: sticky;
    bottom: 0;
    background: #fcf;
    max-height: 100vh;
    overflow: hidden;
}
/* 页脚标题栏固定在底部，作为展开触发栏 */
footer h3 {
    position: sticky;
    bottom: 0;
    height: 30px;
    margin: 0;
    background: #ffc;
    cursor: pointer;
}
/* 页脚内容区，超出高度自动滚动 */
.footer-content {
    max-height: calc(100vh - 30px);
    overflow-y: auto;
}

HTML 代码

<header>
    <h1>Header stuff</h1>
</header>
<article>
    <p>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.</p>
    <p>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.</p>
    <!-- 保留原article内所有段落内容即可 -->
</article>
<footer>
    <h3>Footer Stuff</h3>
    <div class="footer-content">
        <p>Arbitrary height footer content.</p>
        <p>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.</p>
        <p>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!</p>
        <p>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.</p>
        <p>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.</p>
    </div>
</footer>

关键实现细节 #

• 自适应高度：移除footer的固定height，用max-height:100vh限制页脚最大占满视口，内部内容区通过calc(100vh - 30px)预留标题栏空间，超出部分自动滚动。
• 粘性定位逻辑：footer设置position:sticky; bottom:0，滚动到页面底部时固定在视口；标题栏h3单独设置粘性定位，始终停在底部作为展开入口。
• 内容遮挡修复：给article添加顶部内边距，避免被固定header遮挡内容。
• 纯CSS实现：全程无需JavaScript，完全通过CSS属性实现滚动触发展开、自适应滚动的效果。

内容的提问来源于stack exchange，提问作者Ned Martin