Переполнение CSS: автоматически «касание» внизу div

Я хочу сделать div прокручиваемым, когда он касался нижнего div. Я попытался это:Переполнение CSS: автоматически «касание» внизу div

margin-bottom:30px; 
position: relative; 
overflow: auto;

, но это не сработало. Я создал скрипку Тхо показать вам мою проблему: https://jsfiddle.net/wp3wvuj2/1/

Для объяснения: При вводе в поле ввода новое поле добавляется в DIV (Эта функция упрощается). Я хочу, чтобы до ввода полей касания элемента ниже (START-div) он получает прокручиваемый (переполнение: авто).

У кого-то есть идея?

Редактировать: Я заметил, что никто не понимает мою проблему. Я попытаюсь объяснить это лучше: У меня есть список, где игроки добавляют свои имена. Список имеет минимум 4 игрока максимум ∞.

Стартовая кнопка расположена внизу. Проблема в iphone 5 выглядит так:

И теперь, если бы я добавил поле ввода другого игрока, оно перекрыло бы кнопкой START. Вот почему я хочу, чтобы он прокручивался сейчас. Я уже получаю эту работу с фиксированной высотой, но я хочу, чтобы она была отзывчивой!

Поскольку на IPAD, например, это выглядит следующим образом:

И я хочу предотвратить перекрытие с помощью кнопки запуска, как это:

Так он должен получить прокручивать, прежде чем он перекрывает (в зависимости от на размер дисплея).

источник

2017-01-25 lostluke

В настоящее время ввод текста дублирует поле ввода. Из того, что я могу сказать, вы просто хотите ввести поле ввода, которое вы вводите, чтобы прокручивать, как только достаточно содержимого, чтобы перейти к следующему под ним? – Gezzasa

Да, это именно то, что я хочу! – lostluke

Так что, теперь дублирование ввода при вводе не имеет значения? Я не уверен, почему предел ввода составляет 9 символов. Возможно, ответ Ayush Sharma - это то, что вы ищете. – Gezzasa

Обновлено JS скрипку, попробовать это, я обновил CSS часть вашего кода

https://jsfiddle.net/wp3wvuj2/2/

.main_input { 
    width: 209px; 
    top: 70px; 
    margin: auto; 
    margin-bottom:30px; 
    /* position: relative */ 
    overflow: auto; 
    height:216px; //Give some height always to apply overflow auto 
} 

.main_start { 
width: 100%; 
margin: auto; 
/* position: absolute */ //Not required 
bottom: 20px; 
font-family: Pamela; 
font-size: 36px; 
text-align: center; 
}

источник

2017-01-25 08:08:04

Не работает для меня ... Я хочу, чтобы кнопка «Пуск» была расположена внизу. Так, например, когда вы открываете страницу на ноутбуке, вы можете сделать 20 игроков, прежде чем они прокручиваются; в телефоне только 5. – lostluke

, так что добавьте высоту с помощью медиа-запросов для разного разрешения и сделайте фиксированную позицию для начала div –

Я только изменил стили на класс главного входа-

.main_input { 
    width: 226px; 
    height: 234px; 
    top: 70px; 
    margin: auto; 
    margin-bottom:30px; 
    position: relative; 
    overflow-y: auto; 
}

EDIT:

Обратите внимание, что для этого решения, чтобы иметь возможность работать, мне нужно было восстановить верхние и нижние позиции некоторых элементов, когда они нарушали макет. Пожалуйста, используйте поля или прокладки, чтобы получить тот стиль, который вы желаете.

Это теперь работает для прокрутки, когда пробел пробегает на странице.

https://jsfiddle.net/wp3wvuj2/5/

источник

2017-01-25 08:39:01 Gezzasa

Не решайте мою проблему ... Он прокручивается по высоте 234px независимо от разрешения – lostluke

Do у вас есть другая идея? – lostluke

@lostluke, извините за не отвечающий. У меня есть идея, но для этого потребуется много Javascript, где при каждой загрузке страницы вы будете определять размер экрана, за вычетом высоты других элементов (логотип и кнопка запуска), а затем добавьте это как минимальную высоту к вашему входной контейнер. – Gezzasa

Переполнение CSS: автоматически «касание» внизу div

ответ

Смежные вопросы