부모가 오버플로하는 콘텐츠를 잘라내거나 숨길 필요가 있습니다. 한쪽에만 있습니다.

Question

부모의 여러면에 오버플로가 발생할 수있는 하나의 하위 DIV가있는 DIV가 있습니다. 부모의 아래쪽 가장자리를 오버플로하는 자식 부분을 숨길 수 있어야하지만 다른 모든면에서는 넘칠 수 있습니다. 나는 clip CSS 속성에서 찾아 봤는데하지만이 비율을 허용하지 않습니다 주로 때문에, 제출로 그것을 이길 수 없었던

: 여기

는 설명 할 수있는 그래픽이다 이 아이는 정적 높이/너비가 없습니다. 또한 부모 위로 마우스를 가져 가면 자식이 움직이면서 한 위치에서 다른 위치로 이동합니다. 상황을 조금 더 까다롭게 만듭니다.

제안 사항?

내 목표는 스타일링을 위해 외부 마크 업을 추가하지 않는 것입니다. 이 특정 사이트는 큰 학교에서와 마찬가지로 의미 론적 수준에서 견고해야하므로 추가 래퍼 div를 추가하면 이러한 상황이 발생하는 것이 이상적이지 않습니다.

Answer 1

상위 디비전을 하나 더 사용할 수 있다면 다음과 같은 결과를 얻을 수 있습니다.

CSS의 :

#grandparent{ 
     overflow: hidden 
    } 
    #parent { 
     background-color: #600; 
     width: 200px; 
     height: 200px; 
     padding-top: 30px; 
     text-align: center; 
     margin: 0 auto; 
     position: relative 
    } 
    #child { 
     background-color: #090; 
     width: 100%; 
     height: 300px; 
     margin: 0 auto; 
     position: absolute; 
     padding: 0 1.5em; 
     margin-left: -1.5em; 
    } 

마크 업 : 당신이 자바 스크립트를 사용할 수있는 가능성에 열려

<div id="grandparent"> 
     <div id="parent"> 
     <div id="child">Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum</div> 
     </div> 
    </div>