Question

我见过类似的问题，但没有像我正在尝试的那样。大多数示例都使整个col-md-2滚动，我需要内容滚动。

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

在左栏中，我想在顶级=“顶部”处有一个div，在底部的一个div =“bottom”。在中间我有一个清单。说底部和顶部是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＆＃39; calc＆＃39;得到它的高度。

<强>样式

.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>

看看这个filddle -

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

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

2 个答案: