问溢出，导致整个页面滚动。
EN

Stack Overflow用户

提问于 2019-04-25 18:55:15

回答 2查看 1.5K关注 0票数 1

我正在尝试创建一个不滚动的页面。页面上的某些子元素可以滚动，但我试图阻止整个页面滚动。我有一个非常嵌套的子元素，当溢出时，它会接收一个滚动条，但也会导致主文档增长和接收一个滚动条。

这是问题的核心，但还有几个嵌套级别可能是一个因素。

<div class="h-100 d-flex flex-column">    
    <div class="d-flex align-items-center justify-content-center bg-red" style="height: 7%">
    </div>
    <div class="d-flex align-items-center justify-content-center bg-red" style="height: 3%">
    </div>
    <div class="bg-green" style="max-height: 75%; height: 75%; overflow-y: auto;">
        <div class="bg-gray m-4" style="height: 2000px;">
                    The height of this content causes BOTH scroll bars to appear. I only want a bar on the 
                    'green section'
        </div>
    </div>
    <div class="bg-red flex-grow-1">
    </div>            
</div>

这个代码笔演示了我的应用程序是如何设置的。溢出元素嵌套在许多flex显示中(来自引导4实用程序类)。

https://codepen.io/averyferrante/pen/YMdNpO

我只希望代码笔中的绿色部分滚动，而不希望整个文档也增长/滚动。

css