Question

家长div的固定高度为300px，具体取决于第二个div中填写的内容需要放在第一个{{1}下方（而不是旁边）这需要自动调整高度并填充剩余空间。

div

Answer 1

希望您正在寻找类似的东西

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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了解一些细节。

自动调整两个DIV之间的垂直间距

2 个答案: