Html CSS：在不更改滚动条的情况下将元素定位在区域之外

我有一个模态对话框，它有一个垂直滚动条，当模态内容太大而无法包含时会出现

我的问题是：当我想“弹出”模式的控件（实际上是Twitter Typeahead）出现时，它会导致模式上的滚动条扩展

最好用例子来解释：

期望的行为

显示我想要的行为（在输入框中输入字母“a”），但是当常规内容太大（我需要）时，模式不会滚动

不受欢迎的行为

一旦我使模式可滚动，弹出窗口就会导致滚动条增加

.modal-body {
    max-height: 40vh;
    overflow: hidden;
    overflow-y: auto;
}

（向下滚动并在输入框中输入字母“a”） 实际上，我希望弹出窗口在第一个示例中的模式之外流动

---

TwitterTypeahead控件创建自己的位置：相对和位置：绝对元素，因此我认为我不能使用CSS绝对定位动态创建的弹出元素。

更新您的小提琴：

.tt-menu {
  background-color: red;
  top:auto !important;
  bottom:100%;
}

---

这里的问题是，你想要两件相互矛盾的事情。我将用几个例子来解释，直到我得出解决方案的想法

如果我们采用流动元件（容器和内部元件），我们有两种情况：

（1） 内部元件的高度小于或等于容器的高度。在这种情况下，所有溢出（

自动

、

滚动

和

隐藏

）都是相同的

（2） 内部元件的高度大于容器的高度，在这种情况下，我们：

• 保留默认行为，我们将有一个溢出，我们可以查看元素外部

.el{
边框：5px纯绿色；
高度：100px；
}
.el>div{
高度：200px；
宽度：100%；
背景：红色；
}

也许您可以提供一个带有typeahead的提琴？提琴更新我建议您尽可能将输入字段从模式的可滚动区域中删除。我需要通用的解决方案。当模式不够大时，“下拉”菜单无法正确显示，并显示不必要的滚动条。如果模式不够大，菜单仍会导致滚动条。另外，如果你需要一个通用的解决方案，你必须编写一些JS来检查模态的高度并应用相应的样式。“如果模态不够大，菜单将导致滚动条。”这就是重点：）我不希望它导致滚动条。我希望它出现在模态之外。我只想在实际模式内容（不包括typeahead弹出窗口）需要时使用滚动条。我可能会使用一些黑客javascript将弹出元素移到modal div之外，然后重新定位它，但我真的希望不惜一切代价避免这种情况。这是一个通用解决方案是“我不这么认为”类型的问题。溢出自动意味着当建议弹出时，它肯定会显示滚动条，因为输入是最底部的元素，除非您通过JS将其带到外部，或者当您必须在滚动或窗口大小调整时，使用绝对/固定定位来修复它。我喜欢在输入框上方显示建议的想法。如果你的内容很少，比如JSFiddle，你可以把你的内容放在一个div中，这个div的高度是200 px，听起来像是通用的解决方案。嗯，这是通用的，但是我不认为它是一个解决方案。在每个typeahead控件的上方或下方都有一个强制空格看起来非常糟糕，特别是因为该控件可能出现在表单控件列表中的任何位置。我怀疑纯CSS解决方案是不可能的，您已经说服了我。我可以试试你的第二个解决方案。我将把元素移动到可滚动div的父元素中，并将其绝对定位，这将需要计算相对于父元素的位置，而不是相对于浏览器窗口的位置。我将不得不听取滚动区域的滚动事件，并重新定位它了。