使页脚停留在页面底部，而不会剪切内容

Question

我正在计算窗口高度和其他元素的高度，并使页脚停留在底部。我尝试使用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();;
});

Answer 1

您可以通过CSS执行此操作：

position: fixed

此处参考：https://www.w3schools.com/css/css_positioning.asp

Answer 2

尝试使用CSS

  

位置：固定

将此CSS应用于父div

Answer 3

使用固定位置，根本不需要使用jQuery

Answer 4

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

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

Answer 5

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

Answer 6

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