判断内层div是否溢出外层div

发布于 2024-10-20 16:53:16 字数 428 浏览 2 评论 0原文

我正在寻找一种方法来查明内部 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 高？

谢谢！

原文

I'm looking for a way to find out if an inner div has overflown an outer div.

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

With JQuery i've already set #outer to a height of 400px and overflow:hidden. The inner div is automatically being filled with ajax images. So right now, i only see a part of #inner. How do i get JQuery to discover if #inner has more height than #outer?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

妄断弥空 2024-10-27 16:53:16

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

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

回复收藏 0 原文

给妤﹃绝世温柔 2024-10-27 16:53:16

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

回复收藏 0 原文

若沐 2024-10-27 16:53:16

更新（@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');
           }

      };
});
});
};

Update (@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');
           }

      };
});
});
};

回复收藏 0 原文

~没有更多了~