Question

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

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的宽度设置为相同的高度。如果#parent-div的视口高度不为80%，这显然不会奏效。

作为替代方案，您必须避免旋转子元素，只需旋转父元素并为子元素指定高度100%。

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

1 个答案: