overflow:auto/scroll 里面的 scrollHeight 和 clientHeight 是相等的

Question

我知道有数百个关于 scrollHeight 和 clientHeight 的问题，但我没有看到一个回答我的问题，所以这里是：

我有一个 html 页面，正文高度为 100%，正文中有一个容器 DIV，它也被拉伸到整个文档高度。这个容器溢出了。

在容器内部，有两个并排的 DIV（左右浮动），它们在容器 DIV 内滚动。

这是在我试图弄清楚滚动区域内 div 的可见高度时出现的。我假设 clientHeight 是实际可见的部分，但显然情况并非如此。

解释是什么，我将如何获取内部 DIV 在浏览器中显示时的高度，而不显式获取父 DIV 的高度？

这是我正在使用的布局/代码： 代码笔：http://codepen.io/nomaed/pen/qaqRgv

这是布局：

<div id="container"> <!-- height: 100%, overflow: auto -->
  <div id="left-div"> <!-- float:left -->
    <div class="content">....lots of content....</div>
  </div>
  <div id="right-div"> <!-- float:right -->
    <div class="content">....lots of content....</div>
  </div>
</div>

谢谢。

Answer 1

overflow: auto; 在块元素包含的空间超过其可用空间时生效，即当其高度受限时。在您的示例中，这会影响 #container，它会获得滚动条，因为子 #left-div 和 #right-div 占用了大量空间。在这种情况下，scrollHeight 和 clientHeight 的值 会有所不同，#container 也是如此。

但是，#left-div 和 #right-div 本身没有高度限制，也没有滚动条，这使得它们的实际高度——clientHeight——等于它们的scrollHeight。它们不完全可见的事实是由于高度限制和它们的父级overflow: auto #container。

我假设 clientHeight 是实际可见的部分，但显然情况并非如此。

#left-div 和#right-div 的可见高度受#container 的可见高度限制，您只能从#container.clientHeight 获得。

有关这方面的更多信息，请查看MDN: Determining the dimensions of elements，您可以在其中阅读有关clientHeight 和scrollHeight 的更多信息。