CSS-гуру, могу ли я сделать свой абсолютно позиционированный дочерний элемент силой главной родительской высоты?

Question

Это трудно объяснить.

У меня есть абсолютно позиционированное плавающее вторичное содержимое.

Он отлично работает во всех случаях.

За исключением случаев, когда вы отправляете форму и не заполняете поля (см. here, и нажмите отправьте). Ящик расширяется, чтобы показать ошибки, а под нижним колонтитулом - пустое место. Лучший пример, который я могу дать, - увидеть его в действии (ссылка выше).

Я играл с min-height, и он не работал слишком хорошо. Я также хотел бы избежать расширения нижнего колонтитула с кодом в случае ошибок формы, если я могу помочь.

Должен ли я выбрасывать абсолютное позиционирование? И попробуйте с полями? Есть ли другой способ заставить его работать?

Answer 1

Нет. Это абсолютная точка в том, что они не влияют на родителя.

Я бы предложил не использовать абсолютные позиционированные элементы для чего-либо с динамическим контентом.

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

Всегда есть js, если вы не хотите перекодировать свой css, но в конечном итоге было бы лучше изменить ваш css.

Answer 2

Я принял Ben's answer, но я решил определить, какие шаги я должен был взять ...

во-первых, я изменил внутреннюю коробку float: right, с margin: -50px 40px 40px 0;. Это привело к тому, что внутренний ящик вернул правильное место вверху, но родительский рухнул.

Я добавил элемент под #content с clear: left, чтобы родительский элемент расширялся до высоты содержимого слева.

Мне тогда пришлось полностью позиционировать элементы в нижнем колонтитуле, потому что они были вынуждены спускаться по высоте вставки (кто-нибудь знает лучший способ сделать это?).