使页脚保持在页面底部而不会被剪裁[重复]答案

【问题标题】：Make the footer stay at bottom of the page without content getting clipped [duplicate]使页脚保持在页面底部而不会被剪裁[重复]
【发布时间】：2020-02-11 19:35:46
【问题描述】：

我正在计算窗口高度和其他元素高度并使页脚保持在底部。我尝试使用 JavaScript，但页脚仅采用页眉元素高度并将页脚对齐在页眉下方。我想在 JavaScript 的帮助下使页脚保持在底部。使用 css 中固定的位置剪辑内容。我希望页脚随着内容的增长而增长。这就是我试图在 JavaScript 或 JQuery 而不是纯 CSS 中实现这一点的原因。

JSFiddle Code

$(document).ready(function() {
function pageheight() {
debugger
  var ContainerMinHeight = ($(window).height()) - (($("header").height()) + ($("footer").height() + 27));
  $("body").css("min-height", ContainerMinHeight);
}
pageheight();;
});

【问题讨论】：

jsfiddle.net/u24nctj7
不要使用 JS 进行样式设置。 CSS 完全有能力实现这一点。有关详细信息，请参阅副本
我不是在寻找固定位置的方法。我希望页脚在我调整浏览器大小时移动。
位置固定将保持固定，当内容增长时内容将被隐藏。我不希望这种情况发生。我希望页脚随着内容的添加而增长。
@RoryMcCrossan 我已经更新了这个问题。我想这不应该是重复的，因为我不是在问纯 CSS 的解决方案。

标签： javascript jquery footer

【解决方案1】：

使用固定定位，根本不需要使用jquery

【讨论】：

【解决方案2】：

您只能使用 CSS。无需使用 Js 或 Jquery。

参考：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer

【讨论】：

这将在内容增长时剪辑内容。

【解决方案3】：

您可以尝试使用固定位置的 CSS。示例 CSS 规则：

【讨论】：

【解决方案4】：

您可以在 css 中使用固定位置。您还必须注意 html 和 body 元素占据窗口高度的 100%。

【讨论】：

【解决方案5】：

你可以通过css做到：

position: fixed

参考这里：https://www.w3schools.com/css/css_positioning.asp

【讨论】：

【解决方案6】：

试试css

位置：固定

在父 div 应用这个 css

【讨论】：

这将在内容增长时剪辑内容。