Hide inner div(s) that exceed outer div height

Question

The entire element should be hidden. There should be no scrollbars on the outer div. Can this be achieved with CSS only or is jQuery needed? How can this be implemented?

Answer 1

The general idea is the following:

$("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();

(Theoretically this should work.)

---

Another approach:

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

This isn't tested at all, and will very likely need to be tweaked, but to give you a general idea of how you could do it with jQuery:

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

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

Answer 3

Add the overflow:hidden; property to the outer div.