一組孩子的寬度父的純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高度

回答

相關問題