떠 다니는 자식 div에 부모 확장하기

Question

레이아웃 뒤쪽에 전체 너비의 div가있는 여러 콘텐츠 상자가 있어야하는 레이아웃이 있습니다. 지금까지 나는 this jsfiddle example을 만들 수있었습니다. 다음은 레이아웃이 어떻게 될지 간단한 스케치입니다. see here.

내 jsfiddle가 보이면 문제도 시각 자료로 설명하지만 여기에서도 간략하게 설명하겠습니다.

바깥 쪽 내용 상자에는 2 개의 자식 div가 있고, 하나는 회전 된 div가 있고 그 중 하나는 부모 주위를 적절히 둘러 싸고 있습니다. 그리고 내용을 담을 내부 내용 상자. 고정 된 높이로 작동하지만 내용은 유연 해집니다. 따라서 부모 div를 부모와 동일한 높이로 늘려야합니다.

오버플로, 디스플레이, 부동 등 여러 가지를 시도했지만 아무것도 작동하지 않는 것 같습니다.

이 내가 된 div를 배치 한 방법입니다

<div class="content-outer"> 
    <div class="content-inner">Content comes here</div> 
    <div class="extended rotation"></div> 
</div> 

부분 CSS

.content-outer { 
    width: 100%; 
    height: 100px; /* This should adjust to the inner-content height */ 
    background: #FF0000; /* Red */ 
    position: relative; 
    display:block; 
    float: left; 
} 

.content-inner { 
    width: 100%; 
    min-height: 100px; 
    background: #00FF00; /* Green */ 
    float: left; 
} 

.extended { 
    height: 100%; 
    margin: 0 -100%; 
    top: -20px; 
    background: #666; /* Gray */ 
    position: relative; 
    z-index: -1; 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

.rotation { 
    transform:rotate(-2.5deg); 
    -ms-transform:rotate(-2.5deg); /* IE 9 */ 
    -webkit-transform:rotate(-2.5deg); /* Safari en Chrome */ 
    -webkit-backface-visibility: hidden; /* Reduce jagged edge */ 
    outline: 1px solid transparent; /* Reduce jagged edge */ 
} 

내 의도 중 하나가 불분명 한 경우 자세한 설명을 요청하는 주시기 바랍니다!

Answer 1

회전 한 상자의 하위 콘텐츠를 보유한 콘텐츠는 콘텐츠에 따라 커집니다.

역 회전을 자식으로 설정하면 어떻게 든 정상 위치로 되돌아갑니다. http://codepen.io/anon/pen/HrceA

.content-outer { 
    margin:2em 0; 
} 
.extended { 
    background:gray; 
    padding:1em 0; 
    transform:rotate(-2deg); 
} 
.content-inner { 
    transform:rotate(2deg);/* opposite rotation makes to have 0deg rotation at screen*/ 
    background:#00FF00; 
    padding:1em; 
} 

<div class="content-outer"> 
    <div class="extended rotation"> 
     <div class="content-inner"> 
      Content comes here 
     </div> 
    </div> 
</div> 

.content-outer 하나가 될 수도 작동 추가 class :

편집 transform:skewY(2deg);에 대한 추가 div을 방지하기 위해 회전 :

.extended { 
    background:gray; 
    padding:1em 0; 
    transform:skewy(-2deg); 
} 
.content-inner { 
    transform:skewy(2deg); 
    background:#00FF00; 
    padding:1em; 
} 

http://codepen.io/anon/pen/mBhcF