如何通过JavaScript将div的高度值传递给CSS？

方案一：纯CSS Flex布局（推荐，无需JS） #

利用Flex布局可轻松实现元素贴视口底部，高度随内容自适应，无需手动计算高度：

<div class="wrapper">
  Content
</div>

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

.wrapper {
  background: #eee;
  padding: 1rem;
  /* 可添加其他自定义样式 */
}

原理：将body设为垂直方向的Flex容器，通过justify-content: flex-end让子元素（.wrapper）自动对齐容器底部，容器高度设为100vh确保占满视口。

方案二：CSS绝对定位实现 #

如果需要使用定位属性控制位置，可直接通过bottom: 0实现底部对齐，高度自动适配内容：

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
}

.wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #eee;
  padding: 1rem;
}

原理：给body设置相对定位作为上下文，.wrapper设为绝对定位并固定底部位置，左右设为0确保宽度适配父容器，高度随内容自动撑开。

方案三：JS动态更新自定义属性（适配原代码结构） #

如果必须保留你原本的calc(100vh - var(--height))逻辑，需要通过JS实时获取元素高度并更新CSS变量：

<div class="wrapper">
  Content
</div>

:root {
  --height: 0px;
}

.wrapper {
  height: auto;
  position: absolute;
  top: calc(100vh - var(--height));
  left: 0;
  background: #eee;
  padding: 1rem;
}

const wrapper = document.querySelector('.wrapper');

// 更新元素位置的函数
function updatePosition() {
  const height = wrapper.offsetHeight;
  document.documentElement.style.setProperty('--height', `${height}px`);
}

// 页面加载时初始化
window.addEventListener('load', updatePosition);

// 若内容动态变化（如异步加载、用户输入），需在内容更新后调用updatePosition()

原理：通过offsetHeight获取元素的实际渲染高度，动态修改:root下的--height变量，让calc计算出正确的top值。注意必须给.wrapper设置定位属性（如absolute/fixed），top属性才会生效。

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