동적 너비와 동일한 높이 (CSS 유체 레이아웃) + 오버플로를 포함하도록 확장

Question

안녕하세요 - 너비가 좁은 뷰포트 내에서 내용을 포함하도록 유체 너비와 같은 높이로 div를 가질 수 있습니까?

나는 단색 사업부와 함께 작품을 주위에 알아 낸 : http://jsfiddle.net/2nprw0xq/

그러나이 아닌 테두리 : http://jsfiddle.net/534k9e2n/

여기에 내가 사용하고 코드입니다. 고마워, B.

<div class="holder"> 
<div class="shape"></div> 
<div class="shape_outer"> 
<div class="shape_inner"> Text... </div> 
</div> 
</div> 

. 분 높이, 이런 내면의 요소에

.holder { 
    display: inline-block; 
    position: relative; 
    width: 50%; 
} 
.shape { 
    margin-top: 100%; 
} 
.shape_outer { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    border: 1px solid #111; 
} 
.shape_inner { 
    padding: 20px; 
} 

Answer 1

이동 경계하고 추가 100 % 폭과 100 % :

.shape_inner { 
    border: 1px solid #111; 
    padding: 20px; 
    min-height: 100%; 
    width: 100%; 
} 

그것을 체크 아웃 : http://jsfiddle.net/534k9e2n/1/