Прокручиваемый выпадающий div, который заканчивается в нижней части экрана

Question

В следующем примере div имеет предопределенную высоту: 300px.Последний город прокручиваемого выпадающего меню - Zimbawe, и он не отображается, например, на экране iPhone 6.

Я хочу изменить прокручиваемый выпадающий элемент Div таким образом, чтобы не указывать высоту, и сделатьdiv end там, где заканчивается экран.

Есть идеи?

Библиотека, которую мы используем для выпадающего списка: https://github.com/mukeshsoni/react-telephone-input

Здесь вы можете увидеть высоту выпадающего списка, не динамическую: https://github.com/mukeshsoni/react-telephone-input/blob/master/src/ReactTelephoneInput.js#L477

Answer 1

Проблема решена до сих пор.Спасибо, ребята!

Answer 2

На мобильном устройстве такой раскрывающийся список должен отображаться как полный оверлей.Точно так же, как параметры элемента select будут отображаться на мобильном телефоне.

Нацельтесь на мобильные устройства, используя @media и используйте position: fixed; с соответствующими позициями и размерами (исследуйте единицы vh и vw).Чем использовать overflow-y: auto;, чтобы сделать ваш модальный список прокручиваемым.

Answer 3

Попробуйте, установив высоту в зависимости от области просмотра (vh).

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

{height: 100vh;} соответствует высоте области просмотра.

Answer 4

попробуйте добавить максимальную высоту и переполнение

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

Вы должны настроить максимальную высоту в соответствии с размером экрана вручную.

Answer 5

Попробуйте это:

CSS

div { // change selector
  height: auto;
}