引导程序中的滚动条

Question

我正在尝试在引导网格系统中创建一个可滚动的 div。但它不起作用。没有引导程序，我可以获得滚动条。这是我的小提琴。在引导程序内我没有滚动条，但在引导程序网格之外我得到滚动条。我正在尝试在不固定外部 div 高度的情况下实现滚动条。我不能使用 max-height 因为它不会在一定高度后增加。

http://jsfiddle.net/gurukashyap/k4rwo80z/8/

    <div class="container">
  <div class="row">
      <div class="col-sm-9">
          <div id="container">

    <div id="fixeddiv-top">FIXED DIV (TOP)</div>
    <div id="content-container">
        <div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
    </div>
    <div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>
</div>
</div>



      </div>
      <div >

      </div>
    </div>
</div>    
            <br/><br/>
Without bootstrap Grid scroll works!!

             <div id="container">

    <div id="fixeddiv-top">FIXED DIV (TOP)</div>
    <div id="content-container">
        <div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
    </div>
    <div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>

Answer 1

更新

jsFiddle 在这次更新中我添加了一点jQuery 我将屏幕的高度分配给#content 这样你也将获得与height=100% 相同的效果。

Your sample I edited

可能对您有所帮助的其他信息：

在这一行：<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">，您可以根据引导程序的网格系统更改div 的width。该div上有4个类。

1. col-lg-12 当width 屏幕大于1200px 时识别此类。您可以相应地更改数字。 12 是网格系统的全尺寸，6 是网格系统全尺寸的一半，4 是网格系统全尺寸的 3/4，等等。
2. 当屏幕width 等于或大于768px 时识别col-sm-12。相同的规则适用于数字。
3. 当屏幕width 大于992px 时识别col-md-12。数字规则相同。
4. col-xs-12 可以识别屏幕width 是否小于768px 从而移动设备。这里所有的网格数都相当于网格系统的全尺寸。例如，如果您使用 col-xs-12，宽度将与使用 col-xs-1 时 100% 相同，对于 2、3、4 等，宽度也将 100% 相同。