溢出導致整個頁面滾動

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嗎？ 然后您可以根據需要設置寬度和高度，紅色框將看到其滾動條消失！