fullpage.js最后一屏（页脚）高度适配：滚动后完整显示页脚并保留上屏部分内容

嘿，这个需求其实挺贴合日常场景的，我给你准备了两种靠谱的实现方式，你可以根据自己的实际场景来选：

方案一：CSS Grid布局（基础版，适配内容多少两种情况） #

这种方式最省心，不管你的上屏内容是多是少，都能自动适配：当内容不够一屏时，页脚自动贴在视口底部；当内容超过一屏时，滚动到底部就能完整看到页脚，同时上面的内容可以正常滚动，完美满足你“剩余可用高度由上一屏填充”的要求。

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            /* 核心：用Grid把页面分成内容区和页脚区 */
            display: grid;
            grid-template-rows: 1fr auto;
        }

        .content {
            padding: 20px;
            background-color: #f0f0f0;
            /* 如果需要内容区内滚动，加上下面这行 */
            /* overflow-y: auto; */
        }

        .footer {
            height: 60px; /* 改成你需要的小高度 */
            background-color: #333;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- 这里放你的上屏内容，复制多段测试滚动效果 -->
        <p>上屏内容示例...滚动到底部就能看到完整页脚啦</p>
        <p>上屏内容示例...滚动到底部就能看到完整页脚啦</p>
        <p>上屏内容示例...滚动到底部就能看到完整页脚啦</p>
        <p>上屏内容示例...滚动到底部就能看到完整页脚啦</p>
        <p>上屏内容示例...滚动到底部就能看到完整页脚啦</p>
    </div>
    <footer class="footer">我的小高度页脚</footer>
</body>
</html>

原理很简单：grid-template-rows: 1fr auto 让内容区占满除页脚外的所有可用空间，页脚只占用自身设置的高度。完全不需要JS，纯CSS就能搞定。

方案二：CSS Sticky定位（进阶版，页脚滚动到视口后固定） #

如果你想要页脚在滚动到进入视口后就固定在底部，而不是只有滚动到底部才显示，那这个方案更适合你。这样用户在浏览后面的内容时，页脚始终完整可见，同时还能继续滚动查看上屏的内容。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        .content {
            padding: 20px;
            background-color: #f0f0f0;
            /* 给内容区加个最小高度，确保初始页脚在视口外，方便测试滚动 */
            min-height: 150vh;
        }

        .footer {
            height: 60px;
            background-color: #333;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            /* 核心：sticky定位+bottom:0，让页脚滚动到位置后固定在底部 */
            position: sticky;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="content">
        <p>滚动我试试！当页脚进入视口后就会固定在底部，你可以一直滚动查看上面的内容~</p>
        <p>滚动我试试！当页脚进入视口后就会固定在底部，你可以一直滚动查看上面的内容~</p>
        <p>滚动我试试！当页脚进入视口后就会固定在底部，你可以一直滚动查看上面的内容~</p>
    </div>
    <footer class="footer">固定显示的小页脚</footer>
</body>
</html>

这个方案的关键是position: sticky，它结合了相对定位和固定定位的特点：在元素进入视口前是相对定位，进入后就变成固定定位，刚好满足你要的“滚动至刚好可见完整页脚，同时仍能查看上一屏部分内容”的效果。

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