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: Determining the dimensions of elements，您可以在其中详细了解clientHeight和scrollHeight。

scrollHeight和clientHeight里面溢出：auto / scroll是相等的

1 个答案: