在纯CSS中将子宽度设置为父级的高度

Question

我可以设置宽度上child-div等于它的parent-div 高度在纯CSS？

JsFiddle演示

到目前为止,我一直在用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

基于此特定演示,您可以使用视口相对单位,它将按预期工作.

width: 80vh在这种情况下使用- 更新示例.您可以在此处找到浏览器支持.

由于#parent-div具有80%视口的高度,您可以使用80vh将#child-div宽度设置为相同的高度.但是,如果#parent-div没有80%视口的高度,这显然不起作用.

作为替代方案,您必须避免旋转子元素,只需旋转父元素并为子元素赋予高度100%.