时间戳

首页 > 解决方案 > 使页面的一部分可滚动，同时保持小节的高度

html - 使页面的一部分可滚动，同时保持小节的高度

问题描述

我只想让网页的一部分可滚动。假设此部分称为 A 部分。

现在，我所有的身高都是基于百分比的，我的方法是：A 部分是整个网页的底部 70%，在我网页的左半部分。A 部分垂直分为两个部分，顶部（称为 X 部分）占 A 部分高度的顶部 70%，底部（称为 Y 部分）占 A 部分高度的底部 30%。

我想向 A 部分添加另一个小节，但我想保持 A 节现有小节的高度相同。所以我想要一个 70%-30%-50% 的高度分割，其中第三个 50% 部分（称为 Z 部分）溢出，并导致 A 部分垂直滚动。X 部分和 Y 部分的高度应与以前相同。因此，当页面最初加载时，我只想在 Section A 中看到 Section X 和 Section Y，就像以前一样，除了现在如果我在 Section A 中向下滚动，我会在下面看到 Section Z。网页的其余部分不应与 A 部分一起滚动。

我无法弄清楚如何实现这一点。我必须完全摆脱基于百分比的身高吗？我尝试过使用溢出-y 和指定高度的不同方法，但没有成功。我在 StackOverflow 上找到的其他链接也没有给我解决方案。

很抱歉用文字解释了这么多——现有的 HTML 和 CSS 很多，所以我不确定如何简洁地将其粘贴到这里。让我知道是否可以做些什么来更好地解释问题。

标签： htmlcssfrontendweb-frontend

解决方案

听起来您在这里寻找的（没有看到代码）是溢出：滚动属性。

看看这个页面，它给出了一个很好的描述：

https://www.w3schools.com/cssref/pr_pos_overflow.asp

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

推荐阅读