設置高度爲其父與高度％：汽車

I wrote this codepen that does not work.設置高度爲其父與高度％：汽車

HTML

<div class="a"> 
<div class="b"> variable content length variable content length variable content length variable content length variable content length variable content length variable content length 
    <div class="c"> </div> 
    </div> 
</div>

CSS

.a{ 
    height: 500px; 
    width: 70px; 

} 

.c{ 
    height: 50%; 
    background-color: red; 
    display: inline-block; 
}

一個僅僅是一個容器 b爲內容的div可變內容尺寸。

有沒有辦法做到這一點？ c也可以有任何position。但是：.c必須是它的可變父

來源

2015-12-10 Toskan

你的問題有點含糊，我不明白你想做什麼。這是一個簡單的HTML和CSS，無論你想要什麼，都可以做到。 – Franco

所以'.a'必須是'500px'高，'.c'必須是''b''的一半。但是'.b'有多高？ – Oriol

@Oriol'b'是可變的。 Soemtimes真的很高，有時真的很短 – Toskan

的一半大小提供一個高度b太：

.b { 
    height: 100%; 
}

要設置％的元素的高度，其母公司必須有一個height屬性太（中px或％（相同的規則，如果是％））。

如果高度是動態的，請將a元素的overflow屬性設置爲auto。

來源

2015-12-10 22:10:56 David

如果高度是動態的，那該怎麼辦？ – Toskan

如果高度是動態的，請將a元素的overflow屬性設置爲auto。 – David

您可能希望將解釋您的答案的意見轉移到答案上。目前這個答案已被標記（不是我）爲低質量。 –

這是工作解決方案。注意我爲了清晰而改變了一些顏色，對此感到遺憾。

http://codepen.io/anon/pen/WrvLJv

.a{ 
    height: 500px; 
    width: 70px; 
    background:blue; 
    overflow-y:hidden; 
} 

.b{ 
    width:100%; 
    background:grey; 
    position:relative; 
} 

.c{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height: 50%; 
    background-color: red; 
    display: inline-block; 
    z-index:99999; 
}

變化介紹：

增加position:relative到.b和position:absolute到.c，而在左上角定位.c。

2.增加了一個width和分別的，height，100％和50％至.c。

如果我記得沒錯，其餘的只是爲了說明的目的。希望我瞭解你的問題並提供幫助。順便說一句，嘗試向文本添加更多內容，看看它是否適合你。

來源

2015-12-11 00:19:35

設置高度爲其父與高度％：汽車

回答

相關問題