隱藏超過外部 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。