jquery - HTML如何在带有变量的div内容上获取滚动条？

Question

在以下情况下我很难获得滚动条:

Parent DIV 1 (Fixed Height 200px) - No scrollbar
- Child DIV 1 (Max Height 100px - Content varies from empty to maximum) - Should have scrollbar if needed
- Child DIV 2 (Height = Div 1 - Child1 height) - Should have scroll bar if needed

这是我的尝试:

#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 设置高度。这就是为什么没有滚动条的原因。它应该有一些特定的高度设置。