Question

我的容器高度为100％;和宽度中的两个div：100％;我希望顶级div高度取决于内容。它会增加或减少。并且较低的div占据了其余的高度。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用 CSS Flexbox 。使您的父容器成为Flex容器并应用flex属性。制作第二个子元素#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>

希望这有帮助！

一个div高度取决于内容另一个div高度休息

1 个答案: