找出内部 div 是否溢出外部 div答案

【问题标题】：Find out if inner div has overflown outer div找出内部 div 是否溢出外部 div
【发布时间】：2011-07-09 21:31:57
【问题描述】：

我正在寻找一种方法来确定内部 div 是否溢出了外部 div。

<div id="outer">
    <div id="inner">
       <img src="#" alt="" />
       <img src="#" alt="" />
       <img src="#" alt="" />
       <img src="#" alt="" />
    </div>
</div>

使用 JQuery，我已经将 #outer 设置为 400px 的高度和溢出：隐藏。内部 div 会自动填充 ajax 图像。所以现在，我只看到#inner 的一部分。我如何让 JQuery 发现 #inner 是否比 #outer 高？

谢谢！

【问题讨论】：

你想要的结果是什么？可能有一个 css 解决方案，同样适用于您的其他属性

标签： jquery height overflow

【解决方案1】：

你需要检查$('#inner').outerHeight()是否大于$('#outer').height()。

【讨论】：

是的，我做到了：var outer = $("#outer").outerHeight(); var inner = $("#inner").height(); 然而 $inner 给出 0..
你的意思是inner 不是$inner
@Math：这可能是因为图像尚未加载。
他也必须考虑填充，对吧？也许 outerHeight 在这里是合适的

【解决方案2】：

比较外部和内部 DIV 的 offsetHeight 属性的值。

现场演示： http://jsfiddle.net/simevidas/gJbMf/

【讨论】：

【解决方案3】：

更新 (@Hussein)

(function($) {
$.fn.flickr = function(o){
   //FLICKR STUFF
};

if(o) $.extend(s, o);
return this.each(function(){

var list = $('<ul>').appendTo(this);
var url = $.flickr.format(s);
$.getJSON(url, function(r){
  // MORE FLICKR STUFF
};
 if (s.callback) s.callback(list);
    //START CALLBACK FUNCTION
        $('#photographs ul li a img').fadeTo('fast', 0.7);

        $('#photographs ul li a img').hover(function() {
            $(this).fadeTo('fast', 1);
            },function() {
            $(this).fadeTo('fast', 0.7);
        });

        $("#photographs ul li a").fancybox({
            'hideOnContentClick': false,
            'zoomSpeedIn':      0, 
            'zoomSpeedOut': 0, 
            'overlayShow':      true,
            'overlayColor': '#000',
            'overlayOpacity': 0.9,
            'padding': 0
        });


            // OVERFLOW QUESTION SCRIPT - DOESN'T FIND INNER HEIGHT

           var outer = $('#photographs').outerHeight(),
           inner = $('#test').height();


           if(inner>outer){
               alert('Inner exceeded outer');
           }

      };
});
});
};

【讨论】：

@manthijs，分析您的 getJSON 调用应该是另一个问题，我们需要更多详细信息。我已经在这篇文章中回答了你的问题，并为你提供了一个活生生的例子来看看考虑接受答案并打开另一个与你上面的代码相关的问题。
您也将此作为答案发布。你不应该那样做。它应该是评论而不是答案。您可以为此获得反对票。
好吧，对不起，我不习惯这个。谢谢您的帮助;我会问一个新问题！