Question

在绕过许多其他问题后，我找不到解决问题的答案。

我正在编写一个脚本来查明div是否溢出。但在尝试使用jQuery.height()，jQuery.innerHeight()或JavaScripts offsetHeight检索可见高度时。我得到整个div的值（包括溢出的部分），即：与scrollHeight相同的值。

包含DIV样式：

{
    overflow-x: hidden;
    overflow-y: auto;
    width: 73%;
    bottom: 0px;
    float: left;
    height: 100%;
    top: 0px;
}

我已经在jsFiddle上创建了一个模拟场景：http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/（确保将预览屏幕缩小以创建滚动条）

Answer 1

一切似乎都很好，jQuery.height()和jQuery.innerHeight()与溢出属性无关。它们将返回高度，而不仅仅是可见部分。

如果您想知道内容高度，则必须使用scrollHeight。这个scrollHeight是一个常规的javascript属性，你不必使用jQuery

document.getElementById("wrapper").scrollHeight;

或者您可以使用jQuery选择器

$('#wrapper')[0].scrollHeight;

参见工作jsfiddle：http://jsfiddle.net/scgz7an5/1/

请注意

$('#wrapper').scrollHeight;

返回undefined。

<强>更新

你忘记了漂浮元素中最重要的部分。你忘了清除它们。

看看这个jsfiddle，是你的编辑，但浮动元素被清除。在那里，您会看到scrollHeight和jQuery.height()的不同值。请注意.structureContent是包含滚动条的那个，而不是.content .width100。

.structureContent有overflow:auto，您看到的滚动条就来自它。

http://jsfiddle.net/L2bxmszv/5/

我添加了这个类来清除浮动元素。

.clearfix:before,
.clearfix:after, {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.clearfix:after {
  clear: both; }
.clearfix {
  zoom: 1; }

输出是：

.content
324 for scrollHeight
324 for clientHeight
324 for jQuery.height()
.structureContent
324 for scrollHeight
276 for clientHeight
276 for jQuery.height()

查看有关浮动元素的精彩文章并在此处清除它们：http://css-tricks.com/all-about-floats/

Answer 2

您看到的滚动条实际上位于.structureContent元素上，而不是.content上。这就是.content返回所有相同值的原因。 .content未被截断。

Answer 3

我现在已经为我的问题找到了解决方案，虽然我不完全理解为什么会这样做。

这不是我编写的HTML和代码，我只是编写一个修复程序来查看滚动条是否出现。但我发现获取容器父级的ScrollHeight和Height解决了我的问题。比较一下scrollHeight是否大于允许我解决问题的高度。

jQuery .height（）在div上输出与.scrollHeight相同的值：overflow（auto）（IE8）

3 个答案: