滚动条 - 如何控制下拉框高度，使其在父容器之外不撑开高度？

Question

我想写一个超出最大高度显示滚动条，但是下拉框需要展示到外层，现在设置了以后，下拉框会撑开外层元素的高度

有什么方法可以使得下拉框展示到外层呢

Answer 1

可以参考 element-ui, 下拉选项列表元素是在 body 层后追加的子元素, 选项列表设置 absolute 定位飘起来, 就不会占用当前层级容器的宽高了

Answer 2

1. 如果用的是主流的 UI 库，弹框类的组件通常都会提供指定元素挂载到哪个父容器下的配置，比如 antd 的 getConainer
   

2. 自己开发的话

   • 要么参考主流库的实现
   • 要么就用让元素脱离文档流的布局，比如 absolute，fixed，但这两种定位各会受外层元素的定位，和 层叠上下文 的影响，不是很建议
     https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

   

综上，如果不是自己练手的话，最好用现成的组件库，省时省力

Answer 3

要使下拉框超出容器高度并显示滚动条，同时不撑开容器，你可以使用 CSS 的 overflow 属性。以下是一种可能的实现方法：

1. 设置容器的 overflow 属性为 hidden：这将确保超出容器的内容被隐藏。
2. 设置下拉框的 overflow 属性为 auto 或 scroll：这将使下拉框在需要时显示滚动条。
3. 调整下拉框的高度：你可以使用 height 属性来设置下拉框的高度。如果你想要下拉框的高度超过容器，可以设置一个较大的值。

以下是一个示例的 CSS 代码：

.container {  overflow: hidden; /* 隐藏超出容器的部分 */}.dropdown {  overflow: auto; /* 显示滚动条 */  height: 200px; /* 设置下拉框的高度 */}

请注意，这种方法将使下拉框的高度超过容器，并显示滚动条。但是，由于容器的 overflow 属性设置为 hidden，下拉框不会撑开容器的高度。如果你希望下拉框能够撑开容器，可以考虑使用其他布局方法或调整 CSS 样式。