为什么我的div不能在一个词缀菜单中滚动？

我有一个右侧酒吧，这是一个购物车。我面对的问题是当引导程序添加“词缀”类，然后出现溢出时，即使设置了item-cont-scroll类以自动滚动，内容也不会滚动为什么我的div不能在一个词缀菜单中滚动？

总是会出现什么结果发生的是内容被切断在底部

我一直在尝试已经有一天，并得到溢出滚动，仍然似乎无法找到解决方案。我已经将高度设置为100％，创建了一个具有相对位置的父级div，仍然不起作用，

我已经尝试了很多方法，而且我似乎无法找到一种方法来使其工作。

下面的链接，是另一个网站的例子，已经有我想要实现的。如果您点击链接并选择接货订单，您将会看到，当您向购物车中添加更多食品时，侧栏会被修复。

https://www.grubhub.com/restaurant/bareburger-85-2nd-ave-new-york/266100

下面是一个只是我的实际code.You的简要概述，当你滚过被设置为130px偏移会发现，车将得到切断

我真的很迷茫为什么这不起作用。下面是代码的我的网页，并链接到我的js小提琴

任何帮助将非常感激

https://jsfiddle.net/eldan88/7gyk8hm4/#&togetherjs=Iq2LrSwBUP

<style> 


     .categories { 

      border-bottom: solid 1px lightgray; 

     } 


     #item-cont-scroll{ 

      overflow: auto; 

     } 

     header{ 
      height: 200px; 
     } 

     .affix{ 
      top:0; 
     } 

    </style> 

</head> 
<body> 



<article class='container'> 

    <header> 
     Logo goes here 
     </header> 

<div class='row'> 

    <div class='col-sm-8'> 


     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 
     <h2 class='categories'> Test</h2> 



    </div> 


    <div class='col-sm-4'> 


    <section data-spy='affix' data-offset-top='130' > 



      <h1> Item name </h1> 

      <h2> Item Description </h2> 
     <div id='item-cont-scroll'> 
      <h2>Option Category 1 </h2> 

      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 

      <h2>Option Category 2 </h2> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 

       <h2>Option Category 3 </h2> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 
      <div> Item options </div> 



    </div> 
    </section> 



    </div> 


</div> 

</article>

来源

2016-11-23 json1

加入＃项目 - 对照滚动height: 100vh;

或者，如果你喜欢百分之height: 100%;到＃item-cont-scroll元素，它是父级（<section>）。

来源

2016-11-23 22:20:07

谢谢你的回应，但如果我调整我的窗口的内容不resiized，它会被切断。 – json1

对不起，我想我可能会误解你。你能不能上传你想要的和你有什么的截图？ –

为什么我的div不能在一个词缀菜单中滚动？

回答

相关问题