Overflow:auto/scroll 中的scrollHeight 和clientHeight 相等

Question

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

我有一个 html 页面，主体高度为 100%，主体中的容器 DIV 也拉伸到整个文档高度。该容器有溢流。

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

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

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

这是我正在使用的布局/代码：CodePen： 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：确定元素的维度，您可以在其中阅读有关clientHeight和 的更多信息scrollHeight。