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

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

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

在左栏内部,我想在顶级="顶部"处有一个div,在底部的一个div ="bottom".在中间我有一个清单.说底部和顶部是100px.我希望列表占用两者之间的所有空间,如果列表内容大于此区域,我希望它滚动.如果列表内容小于两者之间的空间,我希望它占用所有空间(不崩溃).

这是一个伪造的例子:

    

         


            

                . . .
            

            

                

                    
one
                    . . .
                    
one-thousand
                
            

            

                . . .
            

         
 
         

         
    
  

  

通过给出"滚动区域"绝对定位,我能够在没有引导程序之前完成此操作.我可以使用固定定位使滚动区域工作,但包含"col-md-2折叠,所以"底部"位于顶部.

我怎样才能做到这一点？

这个答案适用于您不知道窗户高度的情况.

您仍然可以使用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

       

          

            

                top
            

            

                

                    
one
                
                

                
                

                    
one-thousand
                
            

            

                bottom
            
          

       
 
       

         


         
       
  

看看这个filddle -

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