溢出导致整个页面滚动

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 utility 类）。

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

我只想滚动代码笔的绿色部分，而不是整个文档 grow/scroll。

Answer 1

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

Answer 2

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

将此添加到您的代码中：

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

此高度规则为容器提供了定义的高度，同时补偿了其兄弟姐妹的高度。

另一个高度规则缺少三层：

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

revised codepen

更详细的解释：

溢出导致整个页面滚动

Overflow causing entire page to scroll

html

css

overflow

flexbox

bootstrap-4