HTML如何在带有变量的div内容上获取Scrollbar？

Question

我在下面的场景中努力获得滚动条：

  

父DIV 1（固定高度200px） - 无滚动条
   - 儿童DIV 1（最大高度100px - 内容从空到最大） - 如果需要，应该有滚动条
   - 儿童DIV 2（身高= 1分 - 儿童1身高） - 如果需要，应该有滚动条

这是我的尝试：

#body {
  position: absolute;
  height: 300px;
  width: 500px;
  border: black dashed 2px;
}
#head {
  border: green solid 1px;
}
#content {
  border: red solid 1px;
  overflow-y: auto;
  height: 200px;
}
#content {
  border: red solid 1px;
  overflow-y: in;
  height: 200px;
}
#content1 {
  border: red solid 1px;
  overflow-y: auto;
  max-height: 100px;
}
#content2 {
  border: red solid 1px;
  overflow-y: scroll;
}
#foot {
  border: blue solid 1px;
  height: 50px;
}

<div id="body">
  <div id="head">
    <p>Dynamic size without scrollbar</p>
    <p>Dynamic size without scrollbar</p>
    <p>Dynamic size without scrollbar</p>
  </div>
  <div id="content">
    <div id="content1">
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
    </div>
    <div id="content2">
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
      <p>Dynamic size with scrollbar</p>
    </div>
  </div>
  <div id="foot">
    <p>Fixed size without scrollbar</p>
    <p>Fixed size without scrollbar</p>
  </div>
</div>

View on JSFiddle

Answer 1

您的Content2 div没有设置高度。这就是没有滚动条的原因。它应该有一些特定的高度设置。