如何设置div距离整个页面底部50vh而非浏览器窗口底部？

你遇到的问题核心是：默认情况下position: absolute的元素会以浏览器视口作为定位参考，而不是整个页面的内容底部。要实现目标，我们需要改变元素的定位参考容器，或者用现代布局特性来实现。

下面给你几种实用的解决方案：

方案一：让body成为定位参考容器 #

这是最直接的传统定位方案，通过给页面根元素设置相对定位，让目标元素以整个页面内容为参考：

/* 先重置默认边距，避免布局异常 */
html, body {
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh; /* 确保即使内容少，页面也占满视口高度 */
}

.test {
  position: absolute;
  bottom: 50vh; /* 现在是相对于整个页面的底部计算距离 */
}

此时.test会相对于body的底部（也就是页面内容的最底部）定位，不管页面内容多长，它都会固定在距离页面底部50vh的位置。

方案二：使用Flex布局（推荐，更现代） #

借助Flex的自动margin特性，不需要依赖定位就能实现需求：

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.test {
  margin-top: auto; /* 自动把元素推到页面内容的底部区域 */
  margin-bottom: 50vh; /* 距离页面底部50vh */
}

这种方式更符合现代布局思路，避免了定位可能带来的层级问题，兼容性也很好。

方案三：使用Grid布局 #

如果你习惯用Grid，同样可以轻松实现：

body {
  margin: 0;
  padding: 0;
  display: grid;
  min-height: 100vh;
}

.test {
  align-self: end; /* 将元素对齐到页面内容的底部 */
  margin-bottom: 50vh; /* 距离底部50vh */
}

你可以根据自己项目的现有布局体系选择合适的方案，三种方法都能完美解决你的问题。

内容的提问来源于stack exchange，提问作者hjskeqwe