설정 자녀의 폭은

Question

나는 그것의 그것과는 A child-div의 폭 동일한 순수 CSS에서 parent-div높이입니다 설정할 수 있습니까?

JsFiddle Demo

지금까지 내가 jQuery를에하고있다 :

$("#child-div").width($("#child-div").parent().height()); 

순수 CSS에서이 달성 할 수 있습니까? 몇 가지 이유로 순수 CSS에 있어야합니다. 여기 내 HTML입니다 :

<div id="parent-div"> 
    <div id="child-div>Hello</div> 
</div> 

그리고 CSS :

#parent-div{ 
    background:#ddd; 
    height:80%; 
    width:30%; position:absolute; 
} 

#child-div{ 
    position:relative; 
    background:#333; 
    color:#FFF; 
    transform: rotate(270deg); 
    transform-origin: 0 0 ; 
    top:100%; 
    height: /* What ???? */; 
} 

어떤 트릭?

Answer 1

이 데모를 기반으로 viewport relative units을 사용할 수 있으며 예상대로 작동합니다.

이 경우 width: 80vh을 사용하십시오 - updated example. 브라우저 지원 here을 찾을 수 있습니다. #parent-div 이후

뷰포트의 80%의 높이가, 같은 높이로 #child-div의 폭을 설정하는 80vh를 사용할 수 있습니다. 그래도 #parent-div의 뷰포트 높이가 80%이 아닌 경우에는 분명히 작동하지 않습니다.

다른 방법으로 자식 요소를 회전하지 않고 부모 요소를 회전하고 자식 요소의 높이를 100%으로 지정해야합니다.