底部屏幕的 HTML 页脚，但不粘滞答案

【问题标题】：HTML Footer at bottom screen, but not sticky底部屏幕的 HTML 页脚，但不粘滞
【发布时间】：2015-06-24 18:08:31
【问题描述】：

我希望在屏幕底部有一个页脚，无论大小。我为此找到了很多解决方案，但这些页脚是粘性页脚。我正在寻找的是位于屏幕底部的页脚，但是当用户向下滚动时，页脚也应该滑动。

在this 中，无论屏幕大小如何，向下箭头都位于屏幕底部。当用户滚动时，箭头也会滚动。这就是我要找的。p>

【问题讨论】：

标签： html css

【解决方案1】：

您提供给我们的示例是在其容器元素上使用动态高度，以便容器无论如何都保持屏幕高度。

这可以通过以下代码来完成：https://jsfiddle.net/6jvs0kv3/

基本上我正在做的是调用一个javascript函数来获取屏幕高度并使主容器的高度减去页脚高度，以便在这种情况下页脚保持可见但不像@987654323那样附加到屏幕位置@会做

编辑 “页脚”后面的内容示例，在这种情况下，我不会命名元素页脚，但这基本上就是您要查找的内容：https://jsfiddle.net/6jvs0kv3/1/

【讨论】：

【解决方案2】：

尝试在父包装元素中使用vh（视口高度）单位：

HTML：

<section>
    text1
    <footer>footer text</footer>
</section>
<section>
    text2
</section>

CSS：

section {
    height: 100vh;
}
footer {
    bottom: 0;
    position: absolute;
    background-color: yellow;
}

【讨论】：

【解决方案3】：

试试这个，它会正常工作的

【讨论】：