溢出导致整个页面滚动答案

【问题标题】：Overflow causing entire page to scroll溢出导致整个页面滚动
【发布时间】：2019-09-15 06:41:52
【问题描述】：

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

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

<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

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

【问题讨论】：

标签： html css bootstrap-4 flexbox overflow

【解决方案1】：

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

将此添加到您的代码中：

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

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

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

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

revised codepen

更详细的解释：

【讨论】：

谢谢！也非常感谢详细的解释。

【解决方案2】：

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

【讨论】：