css - 自动高度垂直滚动条

Question

我有一个具有最大高度的 div。在这个 div 中有两个包含文本的 div。第一个 div 有文本限制，但可能为空或半满，因此大小不一致。下一个 div 有更多数据但不太重要。

我希望它的工作方式是，当外部 div 溢出时，第二个 div 获得滚动条，但我不知道如何在不指定设置高度的情况下执行此操作，但这不起作用，因为另一个 div 在变化。

让我试着向您展示我的意思。拿这段文字:

<div id="text-panel">
  <div id="important-text">
    <p>important text</p>
    <p>important text</p>
  </div>
  <div id="scroll-text">
    <p>scroll text</p>
    <p>scroll text</p>
    <p>scroll text</p>
    <p>scroll text</p>
    <p>scroll text</p>
    <p>scroll text</p>
    <p>scroll text</p>
    <p>scroll text</p>
    <p>scroll text</p>
    <p>scroll text</p>
  </div>
</div>

我想做这样的事情:

#text-panel{
  border: 1px solid black;
  max-height: 250px;
  width: 400px;
  overflow-y: hidden;
  #scroll-text{
    height: auto;
    overflow-y:auto;
  }
}

(码笔http://codepen.io/GuerrillaCoder/pen/jPwNav)

如果我将滚动文本的高度更改为 100px 之类的值，它就可以工作，但如果重要文本为空，则它不会填满整个尺寸。

我不太确定如何实现这种效果。我必须用javascript计算高度吗？有什么图书馆可以提供帮助吗？

Answer 1

将您的 CSS 更改为:

#text-panel{
  border: 1px solid black;
  max-height: 250px;
  width: 400px;
}

#important-text{
  max-height: 100px;
  overflow: hidden;
}

#scroll-text{
  max-height: 150px;
  overflow: auto;
}