隐藏超出外部div高度的内部div

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

这根本没有经过测试，很可能需要调整，但是为了让你大致了解如何用jQuery做到这一点：

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

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

Answer 3

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