如何设置元素相对于其父母和兄弟姐妹的高度？

Question

#parent {
  height: 150px;
  width: 200px;
  border-style: solid;
  border-color: red;
  /*overflow: hidden; this only hides */
}

#sibling1 {
  position: relative;
  width: 100%;
}

#sibling2{
  
}

<div id="parent">
  <h3 id="sibling1">Variable Length Title</h3> 
  <div id="sibling2"> Variable lenght text... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
</div>

我怎样才能得到这样的东西？

css中是否有一种方法可以根据父级的大小和兄弟1占用的高度来建模兄弟2的高度？

即sibling2.height = parent.height - sibling1.height

Answer 1

我想您可能想查看位置属性。 如果你在div容器中有文本，你可以使用position：relative来相对于它所在的div容器定位

元素。

W3Schools: Position

Answer 2

不确定您要执行的操作，但根据您的屏幕截图，如果您想要滚动条，可以添加overflow: hidden或overflow: auto。

#parent {
  height: 150px;
  width: 200px;
  border-style: solid;
  border-color: red;
  overflow: hidden; 
}

#parent2 {
  height: 150px;
  width: 200px;
  border-style: solid;
  border-color: red;
  overflow: auto; 
}

#sibling1 {
  position: relative;
  width: 100%;
}

#sibling2{
  
}

<div id="parent">
  <h3 id="sibling1">Variable Length Title</h3> 
  <div id="sibling2"> Variable lenght text... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
</div>

<div id="parent2">
  <h3 id="sibling1">Variable Length Title</h3> 
  <div id="sibling2"> Variable lenght text... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
</div>