无法将此页脚正确固定到视口底部

Question

我正在尝试自动滚动内容，这是有效的。但是，当我尝试将页脚固定到视口底部时，内容滚动经过页脚并且页脚随内容滚动。

如果我删除页脚元素的 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>

Answer 1

将页脚设置为 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>

Answer 2

您需要使用 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>

您可能需要对边距值进行一些试验，尤其是当您的页脚没有固定高度时。

无法将此页脚正确固定到视口底部

Unable to correctly pin this footer to the bottom of the viewport

html

javascript

css

mini.css