溢出导致整个页面滚动

Question

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

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

<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 显示（来自 bootstrap 4 实用程序类）的深处。

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

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

Answer 1

问题是您的几个容器缺少高度定义。 因此，这些容器的子项会忽略应用于它们的百分比高度。

将此添加到您的代码中：

 <div class="flex-grow-1" style="height: calc(100% - 48px);">

这个高度规则为容器提供了一个定义的高度，同时补偿了它的兄弟的高度。

另一个高度规则缺少三个级别：

 <div class="d-flex flex-column w-100" style="height: 100%;">

修订代码笔

更详细的解释：

• 使用 CSS height属性和百分比值
• Chrome / Safari 未填充 100% 的 flex 父级高度

Answer 2

你试过玩position: absolute吗？ 然后您可以根据需要设置宽度和高度，红色框将看到其滚动条消失！