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

Question

Это довольно сложно объяснить.

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

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

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

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

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

Answer 1

Я принял Ответ Бена , но я решил описать шаги, которые мне пришлось предпринять ...

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

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

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

Answer 2

Нет. В том-то и дело, что абсолюты не влияют на родителей.

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

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

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