【问题标题】:Scroll bar in bootstrap引导程序中的滚动条
【发布时间】:2015-05-09 01:31:02
【问题描述】:

我正在尝试在引导网格系统中创建一个可滚动的 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>

【问题讨论】:

    标签: twitter-bootstrap twitter-bootstrap-3


    【解决方案1】:

    更新

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

    Your sample I edited

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

    在这一行:&lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;,您可以根据引导程序的网格系统更改divwidth。该div上有4个类。

    1. col-lg-12width 屏幕大于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% 相同。

    【讨论】:

    • 嗨,我不想固定容器的高度。在更大的屏幕分辨率中,它将具有我不想要的固定高度。我希望它占据整个可用视口。
    • 事实上,据我所知,如果您将width 设置为 100%,您将无法实现滚动,因为无论您放置多少内容,它都会推动 div 的底部。您应该使用 jQuery 为 div 分配高度。请参阅我的答案的更新。
    • css 上的 height 属性将被 jQuery height 覆盖。
    • 是的,我同意,如果您看下面的示例,高度设置为 100%,但滚动仍然有效。如果我把它放在引导列中也是一样的。jsfiddle.net/gurukashyap/2Lj296q4/1
    • jsfiddle.net/greenfoxx/k4rwo80z/14 那里。它现在在引导程序col 内,并且滚动工作。它与我对我的回答所做的相同,但我会再次解释一下,这样你就清楚了。如果它在没有我添加的jQuery 的引导列内,它将不起作用。
    猜你喜欢
    • 2023-04-10
    • 1970-01-01
    • 2013-04-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-09
    • 2016-02-08
    • 2017-04-06
    相关资源
    最近更新 更多