Question

我有一个右侧栏，用于购物车。我面临的问题是当bootstrap添加＆＃34;词缀＆＃34; class，然后有一个溢出，即使我将item-cont-scroll类设置为自动滚动

，内容也不会滚动

最终发生的事情是内容在底部被截断

我已经尝试了一天，为了让溢出滚动，仍然无法找到解决方案。我已将高度设置为100％，创建了具有相对位置的父div，仍然无法正常工作，

我已经尝试了很多方法，但我似乎无法找到一种方法让它发挥作用。

以下链接是另一个网站的示例，已经有了我想要实现的目标。如果您点击链接并选择提货订单，您会看到侧边栏已固定，当您向购物车添加更多食品时正在添加到购物车。

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

下面是我实际代码的简要概述。当您滚动经过设置为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>

Answer 1

添加到＃item-cont-scroll height: 100vh;

或者，如果您更喜欢百分比height: 100%;到＃item-cont-scroll元素而它的父元素（<section>）。

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

1 个答案: