兩個div，一個在另一個下面，一個動態，第二個填充其余空間

Question

我有一個500x500的div。

我需要在div中創建兩個div，一個在另一個之上。 頂部之一必須是動態的，高度基於內容文本。 第二個必須填充剩余的空間，並具有基於該div的大小的動態圖像，同時保持縱橫比。 誰知道如何實現這一目標？ 我認為僅使用css是不可能的，所以如果你有任何建議用javascript來解決這個問題，那么我將非常非常好。

例子：

Answer 1

我認為父級的固定高度和寬度會導致子元素溢出。

這是具有動態高度和父級寬度的JsFiddle 示例 ，它可以按照您的期望工作。

 .parent{ background-color:yellow; padding:2em; width:100%; display:flex; flex-direction: column; } .child{ height:auto; } #child1{ flex:1; background-color:red; padding:0.5em; } #child2{ flex:1; background-color:blue; padding:1em 1.5em; text-align:center; } #child2 img{ margin: 0 auto; height: 90%; width: 90%; } 

 <div class="parent"> <div class="child" id="child1"> sometest sometest sometestsometest sometest sometest sometest sometest sometestsometest sometest sometest sometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest </div> <div class="child" id="child2"> <img src=""/> </div> </div> 

但是，您也可以使用靜態高度和寬度，在這種情況下，您必須將parent的overflow屬性設置為auto。

嘗試解決方案，如果您需要其他東西，請告訴我。

Answer 2

所有這一切都完全可以通過CSS實現。 物業flex需要一些煩躁。 這是關於如何正確使用flex的最佳教程/解釋。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

至於確保圖像高度相對於父div您只需要在圖像上定義一些百分比高度，寬度將自動縮放。

例如

display: flex到外部容器。 然后，您可以為第一個元素定義一個恆定高度，並將flex: 1賦予第二個元素。 這將使第二個元素增長到空白區域。 您的圖像仍會相應調整大小。

Answer 3

 $(function(){ $("#inside").width($("#inside").height()); }) 

 div{ color: white; padding: 10px; text-align: center; } div div{ margin: 10px; } #outside{ background: rgb(200,200,50); height: 500px; width: 500px; display: flex; flex-direction: column; } #top{ background: rgb(255,0,0); } #bottom{ background: rgb(0,100,100); flex-grow: 1; display: flex; justify-content: center; } #inside{ background: rgb(0,200,0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="outside"> <div id="top"> content here <br> asdf<br> asdf<br> asdf<br> adsf<br> </div> <div id="bottom"> <div id="inside"> </div> </div> </div>