Проблема с переполнением: авто

Question

У меня есть эти разделы с заголовками, где фон выходит за рамки (чтобы выглядеть как лента).Но высота должна быть регулируемой для размещения длинных заголовков, и внутренний контейнер будет выходить за пределы, содержащий div.Поэтому я добавил переполнение: auto на внешний div, но это обрезает внешнюю часть ленты.

Есть идеи?

http://jsfiddle.net/S2p83/

Answer 1

Вы можете вставить разрушающий элемент непосредственно перед закрытием внутреннего контейнера, который вы хотите растянуть (что-то вроде <div style="clear: both;"></div> или <br style="clear: both;"> НО, это добавляет ненужную разметку.

Ваш лучший (и, на мой взгляд, более правильный) вариант - это исправить это в CSS. Вы захотите использовать clearfix для всего контейнера. Лучший вариант - добавить класс CSS clearfix. Я предпочитаю "Micro Clearfix" хак , который я применил к вашему коду здесь:

http://jsfiddle.net/N2Mh7/

РЕДАКТИРОВАТЬ: Предварительный ответ:

Вам нужно будет указать размер самой высоты. Итак, установите min-height и используйте background-size (но будьте осторожны с обратной совместимостью), чтобы растянуть фон.

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

Вот обновленный jsfiddle:

http://jsfiddle.net/Dmm34/