Javascript jQuery .height() 在带有溢出的 div 上输出与 .scrollHeight 相同的值：自动（IE8）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25609506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .height() outputting same value as .scrollHeight on div with overflow:auto (IE8)
提问by Luke Turnbull
After routing around many other questions I have not found an answer that fixes my problem.
在绕过许多其他问题之后，我还没有找到解决我问题的答案。
I am writing a script to find out whether the div is overflowing. But when trying to retrieve the visible height with jQuery.height(), jQuery.innerHeight()or JavaScripts offsetHeight. I am given the value of the whole div(Including the part which is overflowing) i.e: the same value as scrollHeight.
我正在编写一个脚本来找出 div 是否溢出。但是当尝试使用jQuery.height(),jQuery.innerHeight()或检索可见高度时JavaScripts offsetHeight。我得到了整体的值div（包括溢出的部分），即：与 scrollHeight 相同的值。
The containing DIVs style:
包含的 DIV 样式：
{
overflow-x: hidden;
overflow-y: auto;
width: 73%;
bottom: 0px;
float: left;
height: 100%;
top: 0px;
}
I've created a mock up of the scenario on jsFiddle: http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/(Make sure to make the preview screen smaller to create the scroll bar)
我在 jsFiddle 上创建了一个场景模型：http: //jsfiddle.net/Lukedturnbull/L2bxmszv/3/（确保使预览屏幕更小以创建滚动条）
回答by Carlos Calla
Everything seems fine, jQuery.height()and jQuery.innerHeight()has nothing to do with the overflow property. They will return heights, not just the visible part.
一切看起来都很好，jQuery.height()与jQuery.innerHeight()溢出属性无关。它们将返回高度，而不仅仅是可见部分。
If you want to know the content height you have to use scrollHeight. This scrollHeightis a regular javascript property you don't have to use jQuery
如果你想知道你必须使用的内容高度scrollHeight。这scrollHeight是一个常规的 javascript 属性，您不必使用 jQuery
document.getElementById("wrapper").scrollHeight;
Or you can use jQuery selector
或者你可以使用 jQuery 选择器
$('#wrapper')[0].scrollHeight;
See the working jsfiddle: http://jsfiddle.net/scgz7an5/1/
查看工作 jsfiddle：http: //jsfiddle.net/scgz7an5/1/
Notice that
请注意
$('#wrapper').scrollHeight;
returns undefined.
返回未定义。
UPDATE
更新
You forgot the most important part of floating elements. You forgot to clear them.
你忘记了浮动元素最重要的部分。你忘了清除它们。
Take a look at this jsfiddle, is an edit of yours but with floating elements cleared. There you see different values for scrollHeightand jQuery.height(). See that .structureContentis the one that has the scroll bar, not .contentneither .width100.
看看这个 jsfiddle，是你的一个编辑，但清除了浮动元素。在那里，你看到不同的价值观scrollHeight和jQuery.height()。看到那个.structureContent是有滚动条的，而不是.content两者都没有.width100。
.structureContenthas overflow:autoand the scrollbar you see comes from it.
.structureContenthasoverflow:auto和你看到的滚动条来自它。
http://jsfiddle.net/L2bxmszv/5/
http://jsfiddle.net/L2bxmszv/5/
I added this class to clear your floating elements.
我添加了这个类来清除你的浮动元素。
.clearfix:before,
.clearfix:after, {
content: '.content
324 for scrollHeight
324 for clientHeight
324 for jQuery.height()
.structureContent
324 for scrollHeight
276 for clientHeight
276 for jQuery.height()
20';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.clearfix:after {
clear: both; }
.clearfix {
zoom: 1; }
The output was this:
输出是这样的：
##代码##See a great article about floating elements and clearing them here: http://css-tricks.com/all-about-floats/
在此处查看有关浮动元素并清除它们的精彩文章：http: //css-tricks.com/all-about-floats/
回答by James Montagne
The scrollbar you are seeing is actually on the .structureContentelement and not on .content. This is why .contentreturns all the same value. .contentisn't truncated.
您看到的滚动条实际上是在.structureContent元素上而不是在.content. 这就是为什么.content返回所有相同的值。 .content没有被截断。
回答by Luke Turnbull
I have now found a solution for my problem, although I do not fully understand why it is doing this.
我现在已经为我的问题找到了解决方案，尽管我不完全理解它为什么会这样做。
This isn't HTML and code I have written and I was simply writing a fix to see if the scroll bar appears. But i found that getting the ScrollHeight and Height of the parent of the container solved my problem. Comparing to see if the scrollHeight is greater than the height allowed me to solve the issue.
这不是我编写的 HTML 和代码，我只是在编写修复程序以查看滚动条是否出现。但是我发现获取容器父级的 ScrollHeight 和 Height 解决了我的问题。比较一下 scrollHeight 是否大于允许我解决问题的高度。
