在屏幕底部结束的可滚动下拉div

Question

在以下示例中，div的预定义高度为：300px。 可滚动下拉菜单的最后一个城市为Zimbawe，例如，不会在iPhone 6屏幕上显示。

我想更改可滚动下拉div的方式，使其不指定高度并使div在屏幕结束处结束。

有什么想法吗？

我们从下拉列表中使用的库是： https://github.com/mukeshsoni/react-telephone-input

您可以在此处看到非动态下拉菜单的默认高度： https://github.com/mukeshsoni/react-telephone-input/blob/master/src/ReactTelephoneInput.js#L477

Answer 1

尝试一下：

CSS

div { // change selector
  height: auto;
}

Answer 2

尝试一下，根据视口（vh）设置高度。

.div {
    height: 100vh;
    overflow: auto;
}

{height: 100vh;}与视口的高度匹配。

Answer 3

在移动设备上，此类下拉菜单应显示为完整覆盖。就像select元素选项将出现在移动设备上一样。

使用@media定位移动设备，并使用position: fixed;和相应的位置和大小（探索vh和vw单位）。比起使用overflow-y: auto;使模式列表可滚动。

Answer 4

尝试添加最大高度和溢出

 .div {
        max-height: 150px;
        overflow: scroll;
    }

您必须根据屏幕尺寸手动调整最大高度。