时间戳

首页 > 解决方案 > 溢出导致整个页面滚动

html - 溢出导致整个页面滚动

问题描述

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

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

<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

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

标签： htmlcssbootstrap-4flexboxoverflow

解决方案

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

将此添加到您的代码中：

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

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

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

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

修改后的代码笔

更详细的解释：

推荐阅读