固定高度可滚动的 div 在 bootstrap 3 列内

Question

我看到过类似的问题，但与我正在尝试的完全不同。大多数示例使整个 col-md-2 滚动，我需要其中的内容才能滚动。

在一个流体容器内，我有一个左侧导航类型列和一个右侧内容列。

在左列中，我希望顶部 class="top" 有一个 div，底部 class="bottom" 有一个 div。在中间我有一个清单。说底部和顶部是 100px。我希望列表占据两者之间的所有空间，如果列表内容大于这个区域，我希望它滚动。如果列表内容小于两者之间的空间，我希望它占据所有空间（而不是折叠）。

这是一个伪例子：

<div class="container-fluid">
    <div class="row">
         <div class="col-md-2">

            <div class="top">
                . . .
            </div>

            <div class="scroll-area">
                <ul>
                    <li>one</li>
                    . . .
                    <li>one-thousand</li>
                </ul>
            </div>

            <div class="bottom">
                . . .
            </div>

         </div> 
         <div class="col-md-10 content">
         </div>
    </div>
  </div>

  <style>
   .top, .bottom { height: 100px; }
  </style>

我以前可以通过提供“滚动区域”绝对定位来做到这一点而无需引导。我可以使滚动区域以固定位置工作，但包含的“col-md-2”已折叠，因此“底部”位于顶部。

我怎样才能做到这一点？

Answer 1

此答案适用于您不知道窗口高度的情况。

你仍然可以使用 position:absolute; 你只需告诉蓝色和红色部分占据顶部和底部， 绿色部分应该有前 100px，然后你只需使用 css 'calc' 来获取它的高度。

样式

.side{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  padding:0;
}

.scroll-area{
  width:100%;
  height:calc(100% - 200px);
  margin-top:100px;
  background-color:green;
  float:left;
  overflow-y:scroll;
}

html

<div class="row">
       <div class="col-md-2 col-xs-2 side">
          <div style="position:relative;width:100%;height:100%;">
            <div class="top" style="background-color:red;top:0;width:100%;height: 100px; position:absolute;">
                top
            </div>

            <div class="scroll-area">
                <ul>
                    <li>one</li>
                </ul>
                <div style="width:100%;height:10000px;">
                </div>
                <ul>
                    <li>one-thousand</li>
                </ul>
            </div>

            <div class="bottom" style="background-color:blue;bottom:0;width:100%;height: 100px; position:absolute;">
                bottom
            </div>
          </div>

       </div> 
       <div class="col-md-10 col-xs-offset-2 content col-md-offset-2">
         <div style="height:1000px;width:100%;">

         </div>
       </div>
  </div>

看看这个文件 -

https://jsfiddle.net/jxo6pmju/12/

Answer 2

在这里，我为您遇到的问题添加了小提琴链接，使用 . 希望这会有所帮助`

<div class="fixed">
  <b>Fixed Content</b>
  <br/>
  <br/>
  <p>top</p>
</div>
<div class="scrollit">
  <b>Scroll Content</b>
  <br/>
  <br/>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>


</div>
<div class="fixed">
  <b>Fixed Content</b>
  <br/>
  <br/> bottom
</div>

scrollable middle section