隐藏超过外部 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。