Set ребенка на высоту родителя в чистом CSS

Question

Могу ли я установить ширина из child-div равно, что из его parent-divвысота в чистом CSS?

JsFiddle Demo

До сих пор я делал в JQuery:

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

Является ли это достижимо в Pure CSS? По некоторым причинам мне нужно, чтобы это было в Pure 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% окна просмотра, вы можете использовать 80vh установить ширину #child-div «s на ту же высоту. Это явно не сработает, если #parent-div не имеет высоты 80% видового экрана.

В качестве альтернативы вам следует избегать вращения дочернего элемента и просто повернуть родительский элемент и дать дочернему элементу высоту 100%.