jQuery .height（）输出与.scrollHeight相同的值与溢价：自动（IE8）

绕过许多其他问题后，我还没有找到一个答案，解决了我的问题。jQuery .height（）输出与.scrollHeight相同的值与溢价：自动（IE8）

我正在编写脚本来确定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/（请提前预览屏幕较小创建滚动条）

来源

2014-09-01 Luke Turnbull

您使用Jquery的哪个'div'来获得'height'？容器一个，还是内部的？ – LcSalazar 2014-09-01 16:12:03

容器一个，里面有几个内部的div，它们是从数据库中产生的。 – 2014-09-01 16:27:07

一切似乎很好，jQuery.height()和jQuery.innerHeight()与溢出属性无关。他们会回到高处，而不仅仅是可见的部分。

如果你想知道内容高度，你必须使用scrollHeight。这scrollHeight是一个普通的JavaScript属性您不必使用jQuery

document.getElementById("wrapper").scrollHeight;

或者你可以使用jQuery选择

见工作的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/

来源

2014-09-01 16:41:06

啊，对不起。我似乎感到困惑。我已经尝试了所有以下显示的scrollHeight方法，它们返回的值与.height（）ext相同。 – 2014-09-01 16:45:12

你试过了我给你的jsfiddle吗？打开控制台并查看它们返回的值，scrollHeight返回的值不是高度 – 2014-09-01 17:44:29

是的，它工作正常，它似乎并不适用于特定的div。 – 2014-09-01 19:19:48

现在我已经找到了我的问题的解决方案，虽然我不完全理解为什么这样做。

这不是HTML和代码我写了，我只是写一个修复程序，看看滚动条是否出现。但是我发现获得容器父级的ScrollHeight和Height可以解决我的问题。比较一下，看看scrollHeight是否大于我允许我解决问题的高度。

来源

2014-09-02 12:12:54

请参阅我的更新，请参阅您的问题的解决方案的解释。用你的jsfiddle例子，我可以知道你的案例失败的原因。 – 2014-09-02 15:42:06

干杯的人，不幸的是，我不能真正触及任何HTML元素，因为它可能会混淆其他页面！但是，谢谢你的信息，它现在正在工作！非常感谢。 – 2014-09-02 15:55:05

如果您可以在CSS文件中添加一个类，然后添加该类并且不更改HTML，您可以使用'$（'。structureContent'）。addClass（'clearfix'）;'通过Javascript将该类添加到您的元素中。你可以这样解决它。 – 2014-09-02 16:10:00

您看到的滚动条实际上是.structureContent元素，而不是.content。这就是为什么.content返回所有相同的值。 .content未被截断。

来源

2014-09-02 15:58:37

jQuery .height（）输出与.scrollHeight相同的值与溢价：自动（IE8）

回答

相关问题