如何获取元素auto高度值并实现footer置于section下方？

优先用CSS实现（推荐） #

不用写JS，靠CSS就能轻松搞定，几种靠谱的方法：

• 默认文档流：只要section和footer都是块级元素，且没设置position:absolute/fixed这类脱离文档流的属性，footer会自动排在section下面，这是最基础也最省心的方式。先检查下是不是给元素加了奇怪的定位导致布局乱了。

• Flexbox布局：如果需要让footer始终固定在页面底部（哪怕section内容不够长），可以给父容器加Flex布局：

/* 假设section和footer的父容器是body或者某个div */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 让容器占满整个视口高度 */
}
#sect {
  flex: 1; /* 让section占满容器剩余空间 */
}
#foot {
  /* 这里写footer的样式，比如背景色、内边距等 */
}

• Grid布局：用Grid也能快速实现，同样支持footer固定在底部：

.container {
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行占满剩余空间，第二行自适应footer高度 */
  min-height: 100vh;
}

JS方案（仅当CSS无法满足特殊需求时用） #

你的原脚本失效是因为element.style.height只能获取内联样式里写的height值，而auto是默认样式，不会存在于内联样式中。要获取元素实际渲染的高度，得用offsetHeight或clientHeight：

function setFooterPos() {
  const sect = document.getElementById("sect");
  const foot = document.getElementById("foot");
  // offsetHeight包含元素的padding和border，clientHeight只包含padding，按需选择
  const actualHeight = sect.offsetHeight;
  foot.style.top = `${actualHeight}px`;
  // 注意：如果footer用了position:absolute，必须给它的父容器加position:relative，不然top会相对于整个页面
}
// 页面加载完成后执行，还要监听窗口缩放事件，防止布局变化后位置错乱
window.addEventListener('load', setFooterPos);
window.addEventListener('resize', setFooterPos);

内容的提问来源于stack exchange，提问作者NICOLO' TESTICCIOLI