footer无法正确固定在视口底部，内容滚动时页脚跟随移动问题求助

核心问题原因 #

• 根节点、父容器未设置占满视口的高度，内容区域高度计算逻辑异常
• 滚动逻辑绑定了全局窗口而非内容容器本身，内容溢出后触发全局滚动，直接穿过固定定位的footer
• 给footer设置absolute定位后未匹配父容器的相对定位规则，也没有设置层级，导致footer跟随页面滚动

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hyperbole</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
</head>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #cont {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #content{
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
    }
    footer {
        width: 100%;
        flex-shrink: 0;
    }
</style>
<body>
    <div class="container" id="cont">
        <header class="sticky"><h1>Header</h1></header>
        <div id="content"></div>
        <footer class="sticky"><h3>Footer</h3></footer>
    </div>
</body>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        const content = document.getElementById("content")
        setInterval(()=>{
            const textnode = document.createElement("div")
            textnode.innerText = Math.random()
            content.appendChild(textnode)
            // 仅滚动内容区域，不触发全局滚动
            content.scrollTop = content.scrollHeight
        }, 500)
    })
</script>
</html>

实现效果说明 #

• header保持原有吸顶效果，footer固定在视口底部不会跟随内容滚动
• 新增内容只会在content区域滚动，不会穿过footer
• 内容自动滚动到底部的逻辑保持正常运行

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