如何获取子div未超出父容器div部分的高度？

首先纠正一个常见错误：document.getElementById("#id")的写法有误，getElementById的参数不需要加#，直接传元素的id值即可。另外，element.style.height仅能获取元素内联样式中设置的高度，无法获取通过CSS类、外部样式表或浏览器默认规则渲染的实际高度，因此不适合用来获取元素的真实高度。

针对你的问题，分两种场景给出解决方案：

场景1：父元素无滚动，子元素超出部分被裁剪 #

当父元素设置了固定高度且overflow为hidden/auto/scroll，且未触发滚动时，子元素未超出父元素的高度等于父元素的可见内容高度，可以通过clientHeight属性直接获取：

const parentEl = document.getElementById("parent-id");
// 子元素未超出的高度就是父元素的可见内容高度
const visibleChildHeight = parentEl.clientHeight;

clientHeight返回元素内部的可用高度（包含padding，不包含border、margin和滚动条），正好对应父元素能容纳子元素的最大可见高度。

场景2：父元素有滚动，子元素部分被滚动出视口 #

如果父元素触发了滚动，子元素部分区域被移出父元素的可视范围，需要通过计算元素的视口位置来获取实际可见高度：

const parentEl = document.getElementById("parent-id");
const childEl = document.getElementById("child-id");

// 获取元素相对于视口的位置和尺寸
const parentRect = parentEl.getBoundingClientRect();
const childRect = childEl.getBoundingClientRect();

// 计算上下边界的重叠区域
const overlapTop = Math.max(parentRect.top, childRect.top);
const overlapBottom = Math.min(parentRect.bottom, childRect.bottom);

// 计算可见高度，确保结果不为负数
const visibleChildHeight = Math.max(0, overlapBottom - overlapTop);

console.log(visibleChildHeight);

getBoundingClientRect()返回的是元素在视口中的绝对位置，通过计算父元素和子元素的边界重叠区域，就能得到子元素在父元素可视范围内的真实高度。

补充说明 #

• 若要获取元素的完整渲染高度（包括超出父元素的部分），可以使用childEl.offsetHeight（包含border、padding和内容高度，不含margin）或childEl.scrollHeight（包含所有内容高度，包括超出可视区域的部分）。
• 如果父元素设置了box-sizing: border-box，clientHeight会包含border和padding，此时获取的高度依然是父元素的可用内容高度，无需额外调整。

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