Я пытаюсь создать форму, которая переключается с одного столбца на два столбца с определенной шириной области просмотра.Однако я хочу, чтобы левый столбец оставался фиксированным, а правый столбец (который содержит все вопросы) прокручивался.
Я вроде сделал эту работу, но по какой-то причине большое пустое пространство загружается ниже элемента формы.Что делает это странным, так это то, что при прокрутке до нижней части контейнера переполнения высота области просмотра уменьшается до нормального размера.
Форма разбита на три раздела.Первый содержит информацию о форме, второй содержит вопросы и состоит из трех подразделов, а третий содержит кнопку отправки:
<section>ABOUT</section>
<section>
<section>QUESTIONS</section>
<section>QUESTIONS</section>
<section>QUESTIONS</section>
</section>
<section>SUBMIT</section>
Я хочу помочь понять, почему свойство переполнения делает этобывает.Буду также признателен, если ответ поможет мне оформить эту форму так, чтобы на больших экранах не было полосы прокрутки окна.
Вот что я уже пробовал:
Я прошел и проверил вседети секций.Кажется, что одна группа входов вносит свой вклад в проблему, но я не могу понять, как и почему.
Я знаю, что не могу сделать свои секции display:grid;, если на них поставить position:fixed;.
Я также не заинтересован в перемещении контейнера 'submit', так как это будет означать, что кнопка появляется перед вопросами, и кажется, что она будет не очень доступной.
Flexэто не помогло, и я хочу, чтобы оно было отзывчивым, поэтому я не хочу использовать абсолютное или фиксированное позиционирование.
Lonnie Best прокомментировал здесь , сказав, что сетки могут экранировать родительские контейнеры.Есть ли способ остановить это?
Я проверил страницу в Edge, и там этого не происходит.Насколько я вижу, только в Firefox.
Вот скрипка: https://jsfiddle.net/eh7s94a2/ (убедитесь, что окно результатов плоское или не произойдет переполнение)
Спасибо!