javascript - scrollHeight 和 clientHeight 内部溢出 :auto/scroll are equal

Question

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

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

在容器内部，有两个并排的 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; 在 block 元素包含的空间超过其可用空间时生效，即当其高度受限时。在您的示例中，这会影响 #container，它会出现滚动条，因为子项 #left-div 和 #right-div 占用了大量空间.在这种情况下，scrollHeight 和 clientHeight 的值 会有所不同，例如 #container。

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

I assumed that clientHeight is the actual visible part, but apparently this is not the case.

#left-div和#right-div的可见高度受限于#container的可见高度，你只从 #container.clientHeight 获取。

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