溢出，导致整个页面滚动。
溢出，导致整个页面滚动。
提问于 2019-04-25 18:55:15
我正在尝试创建一个不滚动的页面。页面上的某些子元素可以滚动，但我试图阻止整个页面滚动。我有一个非常嵌套的子元素，当溢出时，它会接收一个滚动条，但也会导致主文档增长和接收一个滚动条。
这是问题的核心，但还有几个嵌套级别可能是一个因素。
<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显示中(来自引导4实用程序类)。
https://codepen.io/averyferrante/pen/YMdNpO
我只希望代码笔中的绿色部分滚动，而不希望整个文档也增长/滚动。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-25 19:19:06
问题是，您的两个容器缺少高度定义。因此，这些容器的子容器忽略了适用于它们的高度百分比。
将以下内容添加到代码中：
<div class="flex-grow-1" style="height: calc(100% - 48px);">此高度规则为容器提供一个定义的高度，同时补偿其兄弟姐妹的高度。
，另一种高度规则在下面的三个层次上丢失了：
<div class="d-flex flex-column w-100" style="height: 100%;">更详细的解释：
Stack Overflow用户
发布于 2019-04-25 19:10:55
你试过和position: absolute玩吗？然后，您可以根据需要设置宽度和高度，红色框将看到它的滚动条消失！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55855942
复制相关文章
相似问题
腾讯云开发者
