一组孩子的宽度父的纯CSS高度

我可以设置一个child-div的宽度等于它的parent-div高度纯CSS？一组孩子的宽度父的纯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 ???? */; 
}

什么花样？

来源

2014-10-12 tika

你为什么不在jQuery中做到这一点？ – 2014-10-12 01:11:37

@selu我需要这是CSS，请阅读这个问题。它是动态的。否则，我将不得不在窗口大小调整时进行jquery evry。 – tika 2014-10-12 01:12:44

基于这个特定的演示，你可以使用viewport relative units，它会按预期工作。在这种情况下使用width: 80vh - updated example。你可以找到浏览器支持here。

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

作为一种替代方法，您将不得不避免旋转子元素，只需旋转父元素并为子元素指定高度100%。

来源

2014-10-12 01:13:04

谢谢@Josh。这正是我所期待的。出于某种原因，我需要旋转孩子。 – tika 2014-10-12 01:18:05

一组孩子的宽度父的纯CSS高度

回答

相关问题