jquery - 外側の 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 に追加します。