Информационное поле в DIV с абсолютным позиционированием, содержащееся в FIELDSET, обрезается

Question

У меня несколько проблем с информационным блоком, который абсолютно позиционирован в форме. Основная конструкция страницы заключается в том, что я использую список определений, в котором есть метка для каждого поля, содержащегося в теге DT, и поле ввода с любой другой связанной информацией для этого поля, содержащейся в теге DD.

Из того, что я понимаю, в чем проблема, у меня есть информационное окно (синее поле справа от входа, которое предназначено для предоставления дополнительной информации для входа слева), которое является частью тега DD, который абсолютно позиционируется. Поскольку высота тега DD ограничена тем, насколько растягивается поле ввода, информационное поле обрезается. Каким-то образом мне нужно увеличить высоту тега DD, в котором есть информационное поле, чтобы вместить его.

Вы можете увидеть пример этого здесь: http://www.andbarsolutions.com/test-html/form.htm

У меня есть два примера, один - когда информационное поле находится на последнем входе, так что это означает, что оно нависает над концом формы, но это нормально. Второй пример - это информационное поле на первом входе, которое может простираться за оба входа в зависимости от объема содержимого, которое он будет содержать. Как вы можете видеть, это обрывается в обоих случаях (особенно если вы видите это в FF). Мне нужно будет сохранить метку HR в конце, как она есть для макета.

В идеале я хотел бы посмотреть, есть ли сначала связанный с CSS ответ на этот вопрос, не прибегая к сценариям, поскольку я ограничен количеством сценариев, которые я могу использовать на этой странице, и, как упоминалось ранее, мы могли бы иметь дело с 1,2 , 3 или 4 строки содержимого в этом информационном блоке, поэтому его нужно будет рассматривать как блок с динамической высотой.

Хотелось бы услышать любые отзывы по этому поводу!

Answer 1

Проблема в том, что вы используете overflow:hidden в DL для очистки поплавков, поэтому блок с абсолютным позиционированием скрыт.

Существует несколько способов исправить это:

• Очистить поплавки любым другим способом, например, с помощью clearfix :

  dl:after {
      content:"";
      display:table;
      clear:both;
  }
  

  И добавить hasLayout для IE в условных комментариях:

  dl {
      zoom: 1;
  }