如何在百分比的子元素中使用min-height？

我想根據＃child_2的內容（https://jsfiddle.net/xhtp70e6/）如何在百分比的子元素中使用min-height？

<div id="parent"> 
    <div id="child"> 
     <div id="child_1"></div> 
     <div id="child_2"> 
      Content 
     </div> 
    </div> 
    <div id="child2"></div> 
</div> 

html, body { height: 100%; } 
#parent { width: 50px; height: 1px; min-height: 100%; } 
#child { width: 50px; height: 1px; min-height: 80%; background-color: blue; }  
#child_1 { height: 50%; background-color: black; } 
#child_2 { min-height: 50%; background-color: pink; } 
#child2 { width: 50px; height: 20%; background-color: orange; }

當內容的短，文檔被完全渲染頁面以及渲染HTML。（如上例）

但是當內容很長時，它不顯示整個＃child_2的內容。（https://jsfiddle.net/mrdkvvbn/）＃child2的內容在＃child_2的內容上上升而沒有下降。

<div id="parent"> 
    <div id="child"> 
     <div id="child_1"></div> 
     <div id="child_2">Content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     </div> 
    </div> 
    <div id="child2"></div> 
</div>

我該如何解決？請幫幫我！

來源

2017-03-06 left click

使用顯示：彎曲; – Pete

@peter謝謝!!，我想知道我使用哪個元素顯示flex到..如果你知道答案，請告訴我，請:)） –

我認爲你需要設置在身上，而不是高度最小高度..

html { height: 100%; } 
body { min-height: 100%; }

我更新了小提琴：https://jsfiddle.net/oro2434d/

來源

2017-03-06 14:33:59

你有「heigh：1px;」在#parent和#child - 這是錯誤的CSS應該被刪除。除此之外，很好的答案。 child_1和child2中的非常重要。 –

感謝您的回答！但是不可能將child_1的高度設置爲50％?,我認爲您的答案的child_1的高度僅顯示的高度。 –

如何在百分比的子元素中使用min-height？

回答

相關問題