jQuery .height()在div上输出与.scrollHeight相同的值:overflow(auto)(IE8)

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.

UPDATE

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

看看这个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/