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

Question

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

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

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

这是在我试图找出滚动区域内 div 的可见高度时出现的。我假设 clientHeight 是实际可见的部分，但显然不是这样。

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

这是我正在玩的 layout/code 的片段：代码笔：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; 在块元素包含的内容超过其可用的 space 时生效，即当其高度受到限制时。在您的示例中，这会影响 #container，因为子项 #left-div 和 #right-div 占用了大量 space，所以会出现滚动条。在这种情况下，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 的更多信息。

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

scrollHeight and clientHeight inside overflow:auto/scroll are equal

html

javascript

css

scroll

viewport