Is it possible to make the width of a child-div match the parent-div's height using only CSS?
Typically, I would use jQuery like this:
$("#child-div").width($("#child-div").parent().height());
But I really need to achieve this using only CSS. Here's my HTML:
<div id="parent-div">
<div id="child-div>Hello</div>
</div>
And here's my 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: /* How can I match this with the parent's height? */;
}
Any CSS tricks to make this work?