隐藏超出外部div高度的内部div（s）

Question

应该隐藏整个元素。外部div上不应该有滚动条。这可以用CSS来实现还是需要jQuery？这如何实现？

Answer 1

的总体思路是：

$("div div").filter(function() { 
    var $this = $(this), 
     pTop = $this.parent().offset().top, // parent position 
               // (no need if parent has 
               // "position: relative") 

     pHeight = $this.parent().height(),  // parent inner height 

     eTop = $this.offset().top,    // block position 
               // (can be replaced with 
               // "$this.position().top" 
               // if parent has 
               // "position: relative") 

     eHeight = $this.outerHeight(true);  // block outer height 

    return (eTop + eHeight) > (pTop + pHeight); 
}).hide(); 

（理论上，这应该工作）

---

另一种方法：

var sumHeight = 0; 
$("div div").filter(function() { 
    var $this = $(this), 
     pHeight = $this.parent().height();  // parent inner height 

    sumHeight += $this.outerHeight(true);  // + block outer height 

    return sumHeight > pHeight; 
}).hide(); 

Answer 2

将overflow:hidden;属性添加到外部div。

Answer 3

这不是在测试所有的，很可能需要调整，但给你一个大致的想法如何用jQuery做到这一点：

var container = $('#container'); 
var element = $('#element'); 

if ((element.position().top + element.position.height()) > container.height()) { 
    element.hide(); 
}