我正在嘗試自動滾動正在作業的內容。但是，當我嘗試將頁腳固定到視口底部時，內容會滾動經過頁腳，而頁腳會隨內容一起滾動。
如果我洗掉頁腳元素的 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>
uj5u.com熱心網友回復：
您需要使用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>您可能需要稍微嘗試一下邊距值，尤其是當您的頁腳沒有固定高度時。
uj5u.com熱心網友回復：
將頁腳設定為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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/369745.html
標籤：javascript html css 小文件