jQuery .height（）输出与.scrollHeight相同的值在div带溢出：auto（IE8） [英] jQuery .height() outputting same value as .scrollHeight on div with overflow:auto (IE8)

问题描述

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

After routing around many other questions I have not found an answer that fixes my problem.

我正在写一个脚本，以确定div是否溢出。但是当尝试使用 jQuery.height（），，jQuery.innerHeight（）或 JavaScripts offsetHeight 。我得到整个 div 的值（包括正在溢出的部分）ie：与scrollHeight相同的值。

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样式：

{
    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 $ c>和 jQuery.innerHeight（）与overflow属性无关。

If you want to know the content height you have to use scrollHeight. This scrollHeight is 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

请注意，

returns undefined.

返回undefined。

UPDATE

UPDATE

您忘记了浮动元素最重要的部分。您忘了清除它们。

Take a look at this jsfiddle, is an edit of yours but with floating elements cleared. There you see different values for scrollHeight and jQuery.height(). See that .structureContent is the one that has the scroll bar, not .content neither .width100.

看看这个jsfiddle，是您的编辑，但是浮动元素已清除。您会看到 scrollHeight 和 jQuery.height（）的不同值。看到 .structureContent 是有滚动条的，不是 .content 不是。 <100>

.structureContent has overflow:auto and the scrollbar you see comes from it.

http ：//jsfiddle.net/L2bxmszv/5/

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

I added this class to clear your floating elements.

.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/

See a great article about floating elements and clearing them here: http://css-tricks.com/all-about-floats/

这篇关于jQuery .height（）输出与.scrollHeight相同的值在div带溢出：auto（IE8）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！