如何使 div 粘在页面底部 - Javascript

假设你有一个页面，需要让一个 div 始终保持在页面的底部，无论用户滚动了多少内容。本文将介绍如何使用 Javascript 实现这一功能。

方法一：使用固定定位

最简单的方法是，将该 div 的 CSS 值设置为 position: fixed; bottom: 0;。这将使 div 相对于浏览器窗口的底部固定，而不是相对于页面内容的底部。

#fixeddiv {
  position: fixed;
  bottom: 0;
}

方法二：使用绝对定位和计算

如果你需要让 div 保持相对于页面内容底部的位置，而不是相对于浏览器窗口底部，那么你可以使用绝对定位和 Javascript 计算来实现。

首先，将该 div 的 CSS 值设置为 position: absolute;。

#absolutediv {
  position: absolute;
}

然后，使用以下 Javascript 代码，根据页面内容高度和窗口高度计算出该 div 应该所在的位置，并将其设置为 bottom 属性值。

let contentHeight = document.body.scrollHeight;
let windowHeight = window.innerHeight;
let div = document.getElementById('absolutediv');
let bottom = contentHeight - windowHeight;
div.style.bottom = bottom + 'px';

方法三：使用 CSS Flexbox

CSS Flexbox 是一种强大的布局模式，可以轻松地实现页面布局的各种要求。使用 Flexbox，你可以将一个 div 放在容器的底部，同时保持自适应高度。

首先，将容器的 CSS 值设置为 display: flex; flex-direction: column;。

.container {
  display: flex;
  flex-direction: column;
}

然后，在容器内部创建一个 div，并将其 CSS 值设置为 margin-top: auto;。这将使 div 向容器的底部对齐。

<div class="container">
  <div class="flexdiv"></div>
</div>

.flexdiv {
  margin-top: auto;
}

总结

这几种方法都可以达到将 div 粘在页面底部的效果，具体方法取决于你对布局的要求和需求。无论选择哪种方法，都需要使用 Javascript 或 CSS 计算来实现该效果。