我正在尝试自动滚动内容，这是有效的。但是，当我尝试将页脚固定到视口底部时，内容会滚动经过页脚，页脚会随内容一起滚动。
如果我删除页脚元素的CSS，页脚从顶部开始，内容将其推到底部，内容将自动滚动到页脚上方。但是页脚并没有像我希望的那样钉在底部。
<!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>
#content{
height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
footer {
position: absolute !important;
bottom: 0 !important;
width: 100%;
}
</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) => {
history.scrollRestoration = "manual"
window.scrollTo(0, document.body.scrollHeight)
setInterval(()=>{
var content = document.getElementById("content")
var textnode = document.createElement("div")
textnode.innerText = Math.random()
content.appendChild(textnode)
window.scrollTo(0, document.body.scrollHeight)
}, 500)
})
</script>
<html>
您需要使用position: fixed而不是position: absolute。position: absolute从文档流中取出元素，并将其相对于整个页面放置。position: fixed也将其从文档流中移除，但将其相对于视口放置。您将再次在页脚下方隐藏内容-要解决此问题，请将margin-bottom设置为等于页脚高度的body。代码：
<!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>
#content{
height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
footer {
position: fixed !important;
bottom: 0 !important;
width: 100%;
}
body {
margin-bottom: 80px;
}
</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) => {
history.scrollRestoration = "manual"
window.scrollTo(0, document.body.scrollHeight)
setInterval(()=>{
var content = document.getElementById("content")
var textnode = document.createElement("div")
textnode.innerText = Math.random()
content.appendChild(textnode)
window.scrollTo(0, document.body.scrollHeight)
}, 500)
})
</script>
<html>您可能需要尝试一下边距值，尤其是当您的页脚没有固定高度时。
将页脚设置为fixed !important;，它现在应该保持原位。
window.addEventListener('DOMContentLoaded', (event) => {
history.scrollRestoration = "manual";
window.scrollTo(0, document.body.scrollHeight);
const content = document.getElementById("content");
setInterval(() => {
const textnode = document.createElement("div");
textnode.innerText = Math.random();
content.appendChild(textnode);
window.scrollTo(0, document.body.scrollHeight);
}, 500);
});#content {
position: absolute;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
width: calc(100% - 20px);
}
footer {
position: fixed !important;
bottom: 0 !important;
width: 100%;
}<!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>
<body>
<div style="position:relative; height:calc(100vh - 140px)">
<div class="container" id="cont">
<header class="sticky">
<h1>Header</h1>
</header>
<div id="content"></div>
<footer class="sticky">
<h3>Footer</h3>
</footer>
</div>
</div>
</body>