自動調整兩個div

Question

父div之間vertial空間已固定的300px高度，這取決於有多少內容填充在需要下面（未旁邊）第一div被放置在第二div並且這需要自動調整高度和填補剩餘空間。

<div class="parent"> 
    <div class="child-one"> 
     Auto adjust the space of this div depending upon "child-two" div height 
    </div> 
    <div class="child-two"> 
     Height of this div will depend upon the data filled. 
    </div> 
</div> 

Answer 1

希望您正在尋找這樣的事情

.parent{ 
 
    height: 200px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    border: 1px solid blue; 
 
} 
 
.child-one{ 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    background: blue; 
 
} 
 
.child-two{ 
 
    background: red; 
 
} 
 
.parent div{ 
 
    padding: 5px 10px; 
 
}

<div class="parent"> 
 
    <div class="child-one"> 
 
     Auto adjust the space of this div depending upon "child-two" div heightLorem ipsum dolor sit amet, quas doming inermis at per, discere mediocrem omittantur ei vis, graeci moderatius at qui. Praesent convenire eloquentiam nec te 
 
    </div> 
 
    <div class="child-two"> 
 
     Height of this div will depend upon the data filled.Lorem ipsum dolor sit amet, quas doming inermis at per, discere mediocrem omittantur ei vis, graeci moderatius at qui. Praesent convenire eloquentiam nec te 
 
    </div> 
 
</div>

Answer 2

您可以使用display: flex一些額外的屬性來實現您的要求。

注：我設置height: 200px和背景顏色僅用於測試目的。

.parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
    
 
    height: 200px; 
 

 
    background-color: red; 
 
} 
 

 
.child-one { 
 
    height: 100%; 
 

 
    background-color: green; 
 
} 
 

 
.child-two { 
 
    background-color: blue; 
 
}

<div class="parent"> 
 
    <div class="child-one"> 
 
     Auto adjust the space of this div depending upon "child-two" div height 
 
    </div> 
 
    <div class="child-two"> 
 
     Height of this div will depend upon the data filled. <br /> 
 
     Some text. 
 
    </div> 
 
</div>

請看jsFiddle的一些細節。