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

我可以在纯CSS中将child-div的宽度设置为等于parent-div 高度的宽度吗？

JsFiddle演示

到目前为止，我一直在使用jQuery：

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

这在Pure CSS中是否可以实现？ 出于某些原因，我需要将它放在Pure CSS中。 这是我的HTML：

 
 
Hello
  

和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%的高度。