将页脚保留在页面底部，仅在滚动后出现

Posted 2023-03-21

技术标签:

【中文标题】将页脚保留在页面底部，仅在滚动后出现【英文标题】：Keep footer at bottom of page, only appearing after scrolling 【发布时间】：2016-06-17 16:33:24 【问题描述】：

我试图让包含许多图像（因此需要大量滚动）的网页的页脚仅在页面完成滚动后出现。相反，页脚在发生任何滚动之前出现在页面底部，因此最终出现在页面中间的某个地方。

相关 html：

<body>
    <header>
        <a href="index.html" id="logo"> <h1>
        <div id="header_title">
            Title
        </div></h1> </a>
        <nav>
            <ul>
                <li>
                    <a href="index.html" >About</a>
                </li>
                <li>
                    <a href="resume.html">Resume</a>
                </li>
                <li class="subNav">
                    <a class="selected" >Portfolio</a>
                    <ul>
                        <li>
                            <a href="writing_samples.html">Writing Samples</a>
                        </li>
                        <li>
                            <a href="photoshop.html">Photoshop</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
        <section>
            <ul id="gallery">
                <li>
                    ... images would go here, normally there would be many <li> with content inside them; shortened here for simplicity
                </li>   
            </ul>
        </section>
    </div>
    <footer>
            <p>
                &copy; 2016 Name.
            </p>
        </footer>
</body>

还有 CSS：

    html 
    height: 100%;
    

    body 
        font-family: 'Playfair Display', open sans;
        position: relative;
        height: 100%; 
    


    footer 
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    font-size: 0.75em;
    text-align: center;
    clear: both; /* cleared from influence of any other floats
     cleared on both left and right sides */
    padding-top: 50px;
    color: #000000;
    width: 100%;

【问题讨论】：

你试过删除 position: absolute;来自页脚的 css？我转发了我的评论作为答案。 【参考方案1】：

移除位置：绝对；来自页脚的 css

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review @sebastianbrosch 我很抱歉。我没有看到，仍然没有从帖子中看到任何问题。该帖子提出了一个问题，我只是提供了一个解决方案。此外，根据作者的说法，我的解决方案确实有效。在我看来这是一条评论，因为你只说“删除这个！” - 添加解释，不要提供低质量的答案！ - ***.com/help/how-to-answer【参考方案2】：

具有“绝对”位置，您的页脚位置不依赖于将其向下推的内容。它仅取决于具有“相对”位置的父 div。在这种情况下，您的身体标签。如果你给你的页脚一个“相对”的位置（这是默认的），它会被你想要的内容下推。

【讨论】：

以上是关于将页脚保留在页面底部，仅在滚动后出现的主要内容，如果未能解决你的问题，请参考以下文章