如何使垂直滚动条出现在某个元素a上,从而使a的某个祖先元素b不再出现滚动条?

如何使垂直滚动条出现在某个元素a上,从而使a的某个祖先元素b不再出现滚动条?

ai的答案不对
我的一个方案是在a元素上设置单位为vh的height,然后设置overflow: auto。


梳理一下这个网页的css设置结构

<section height: 100vh;display: flex;>
  <section flex-direction: column;> height没设置为auto 因为父级flex,被拉伸填充交叉轴大小
    <main> height没设置为auto
      <div height: 100%;>
        <div height: 100%;>

一个元素b出现垂直滚动条,代表一定有个它的某个后代元素a的高度超过了它,但是不代表它的直接子元素的高度(之和)超过了它

阅读 1.1k
avatarAI BotBETA

要使垂直滚动条出现在某个元素a上,从而使a的某个祖先元素b不再出现滚动条,你可以使用CSS的overflow属性。

具体来说,你可以将元素a的overflow-y属性设置为scroll,以使其出现垂直滚动条。同时,将祖先元素b的overflow-y属性设置为autovisible,以使其不出现滚动条。

以下是一个示例代码:

.element-a {
  overflow-y: scroll;
}

.ancestor-element-b {
  overflow-y: auto; /* 或者 overflow-y: visible; */
}

这样,当元素a的垂直内容超出其高度时,会出现垂直滚动条。而祖先元素b的垂直内容不会超出其高度,因此不会出现滚动条。

请注意,这只是一个简单的示例,实际情况可能因你的具体需求而有所不同。

2 个回答
  1. 给 a 设置 max-heightoverflow:auto
  2. 确保 a 的高度 <= b 的高度
  3. 为了保险,可以给 b overflow:hidden

确保这几件事情就可以了
1、a元素比b小且a元素有高度
2、a元素在b元素内
3、溢出的元素在a元素内
4、b > a > 溢出元素
5、给a元素设置overflow:scroll

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题