외부 div 높이를 초과하는 내부 div 숨기기

Question

전체 요소가 숨겨져 있어야합니다. 바깥 쪽 div에는 스크롤바가 없어야합니다. CSS만으로 구현할 수 있습니까? 아니면 jQuery가 필요합니까? 이것이 어떻게 구현 될 수 있는가?

Answer 1

일반적인 아이디어는 다음과 같다 이것은에서 테스트되지

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

외부 div에 overflow:hidden; 속성을 추가하십시오.

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

(이론적으로이 해야 작동합니다.)

---

또 다른 방법 :

Answer 3

모두, 그리고 매우 조정될 필요가 있지만, 당신에게 일반적인 아이디어를주기 위해 jQuery로 어떻게 할 수 있습니까?

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

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