jquery - 在纯 CSS 中将子项的宽度设置为父项的高度

Question

我可以将 child-div 的 width 设置为其 parent-div height 吗在纯 CSS 中？

JsFiddle Demo

到目前为止，我一直在用 jQuery 做:

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

这在纯 CSS 中可以实现吗？出于某些原因，我需要使用纯 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 的高度为视口(viewport)的80%，您可以使用80vh 来设置#child -div 的宽度与高度相同。不过，如果 #parent-div 的高度不是视口(viewport)的 80%，这显然行不通。

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