如何保持包含div元素的高度？

我想在頁面中繪製三個矩形。頂部矩形必須比其他兩個小得多。您可以看到頂部的矩形有一個flex-grow: 1（與其他矩形的5相比）。如何保持包含div元素的高度？

但是，一旦我將三個圖像放在頂部矩形內，它會變得更高，因此它會比其他矩形變大。

我能做些什麼來防止頂部矩形變高？我只是想調整圖片大小以適應原始容器大小。

我會很高興使用flexbox功能的解決方案（因爲我試圖學習它）。

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    flex-flow: column wrap; 
 
    display: flex; 
 
} 
 
div { 
 
    flex-grow: 5; 
 
    display: flex; 
 
    border: solid; 
 
    margin: 1em; 
 
} 
 
#top { 
 
    flex-grow: 1 
 
}

<div id="top"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg"> 
 
</div> 
 

 
<div id="middle"></div> 
 
<div id="bottom"></div>

http://codepen.io/CrazySynthax/pen/ZBPXry

來源

2016-12-20 CrazySynthax

的30％你的最大高度大於矩形初始大小更大。嘗試爲其設置固定高度或降低最大高度以匹配初始大小。在代碼筆上，我使用了max-height：20％;並得到你正在尋找的結果，但要在所有顯示器上保持一致，我只需將高度設置爲固定的百分比。例如：身高：20％。如果你不想讓div的高度發生變化，也沒有必要使用max-height。

來源

2016-12-20 22:04:04 DonO

使用max-height可能是一個很好的解決方案，但使用百分比可能會產生誤導。你有沒有使用百分比的想法？ – CrazySynthax

爲了得到您想要的輸出，您將不得不將高度設置爲相同數字的最大高度。那時候不需要有最大高度。只需設置高度：50px; – DonO

對不起。這是我的錯誤。我並不是說我的帖子中的代碼包含「max-height」。我只是尋找一個解決方案，而不使用百分比。 – CrazySynthax

如何保持包含div元素的高度？

回答

相關問題