javascript – jQuery .height()在div上输出与.scrollHeight相同的值,带溢出：auto(IE8)

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

一切似乎都很好,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/