在绕过许多其他问题后,我找不到解决问题的答案.
我正在编写一个脚本来查明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/(确保将预览屏幕缩小以创建滚动条)
解决方法
一切似乎都很好,jQuery.height()和jQuery.innerHeight()与overflow属性无关.它们将返回高度,而不仅仅是可见部分.
如果您想知道内容高度,则必须使用scrollHeight.这个scrollHeight是一个常规的javascript属性,你不必使用jQuery
document.getElementById("wrapper").scrollHeight;
或者你可以使用jQuery选择器
$('#wrapper')[0].scrollHeight;
见工作jsfiddle：http://jsfiddle.net/scgz7an5/1/
请注意
$('#wrapper').scrollHeight;
返回undefined.
UPDATE
你忘记了浮动元素中最重要的部分.你忘了清除它们.
看看这个jsfiddle,是你的编辑,但浮动元素被清除.在那里你看到scrollHeight和jQuery.height()的不同值.看到.structureContent是滚动条,而不是.content .width100.
.structureContent有溢出：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/
