一個div高度取決於內容另一個div高度休息

Question

我有容器高度100％;其中兩個div寬：100％;我想頂級div高度取決於內容。它會增加或減少。和更低的div休息的高度。

div { 
 
    width: 50%; 
 
    height:100%; 
 
} 
 
#p1 { 
 
    border:1px solid red; 
 
} 
 
#p2 { 
 
    border:1px solid blue; 
 
}

<div> 
 
    <div id="p1">item1</div> 
 
    <div id="p2">item2</div> 
 
</div>

Answer 1

您可以使用CSS Flexbox的。使您的父容器成爲彈性容器並應用柔性屬性。讓你的第二個子元素#p2 { flex: 1 }。它會自動佔用剩餘的空間。

在下面的代碼片段看一看：

.flex-container { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
#p1 { 
 
    border:1px solid red; 
 
} 
 
#p2 { 
 
    border:1px solid blue; 
 
    flex: 1; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="flex-container"> 
 
    <div id="p1">item1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt expedita dolorum obcaecati animi voluptatem doloribus natus iusto quae assumenda molestiae? Cum dolorem repellat vero rem porro eos magnam, vel iure!</div> 
 
    <div id="p2">item2</div> 
 
</div>

希望這有助於！