一个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>

希望这有助于！