контроль высоты — многоступенчатая форма без абсолютного позиционирования

#html #css #forms

#HTML #css #формы

Вопрос:

Ниже приведен сценарий, который я использую:

http://www.webdeveloper.com/forum/archive/index.php/t-152085.html

Как вы можете разместить контейнер вокруг многоступенчатой веб-формы без искажения высоты / абсолютного позиционирования?

Некоторые из моих шагов имеют разную высоту, а также при абсолютном позиционировании у вас не может быть оболочки с цветом фона.

Моя проблема в том, что высота сумасшедшая, потому что div скрыты, но высота все равно берется

Любая альтернатива с тем же сценарием, которая позволяет изменять цвет оболочки bg и высоту, вместо того, чтобы заполнять полосу прокрутки?

РЕДАКТИРОВАТЬ: вот живой пример (обратите внимание на проблему с полосой прокрутки?)

http://fastfolio.com/div-test/test.html

если шаги разной высоты, прокрутка мешает. может быть, какое-то исправление #top или что-то в этом роде? как заставить его считывать высоту и соответствующим образом регулировать?

Ответ №1:

Проверьте jQuery, так как это упростит обработку прокрутки.

В вашем примере HTML-страницы замените onclick функцией, которая проверяет текущую высоту div ( $(this).parent().parent().height() ) и положение прокрутки тела ( $(body).scrollTop()).

Если высота меньше, чем scrollTop, используйте scrollTop для перемещения тела вверх.

jQuery займет у вас 30 минут, чтобы разобраться в себе, но оно того стоит и поможет решить множество подобных запросов.

Комментарии:

1. Спасибо за ответ. У вас есть пример того, что вы имеете в виду? Я показываю пример облегченной версии формы, над которой я работаю, голые кости — я уже использую onClick для проверки формы. Мне нужно было бы написать несколько экземпляров или иметь возможность выполнять более одной функции. Есть какие-нибудь идеи? Я хорошо разбираюсь в визуальном, поэтому видеть это помогает…

2. просто чтобы уточнить, как будет написана функция? Спасибо! (и, если возможно, как добавить несколько функций, включая top)

3. что-то вроде этого, но вместо того, чтобы работать только с изменением размера окна, оно должно работать при изменении размера div height, или, может быть, оно сбрасывается и заставляет пользователя переключаться на #top ? benalman.com/code/projects/jquery-resize/examples/resize

4. я нашел, как создать функцию для прокрутки вверх, чтобы, по крайней мере, с разной высотой вы не застряли внизу без содержимого, но высота невидимого div по-прежнему остается по какой-то причине функция jumpScroll() { window.scroll(0,0); // цели горизонтальной и вертикальной прокрутки }

5. я понимаю, что часть проблемы может быть связана с видимостью css: скрыта, поскольку она по-прежнему сохраняет высоту предыдущего div

Ответ №2:

Вы не должны использовать видимость для переключения отображаемого элемента, а скорее стиль CSS «display» (между «block» и «none» будет делать то, что вам нужно).

Разбивка на страницы также не должна зависеть от идентификаторов — гораздо лучше использовать массив и держатель «текущего состояния». «Следующий» объект отправки для должен

http://consulting.euphemize.net/jack.shepherd/pagination-form/

Здесь представлены лучшие варианты 🙂