Div в Div растягивать

Я проектирую сайт и выполняю кучу работы со стилем на данный момент. Он имеет 3 столбца (два больших столбца контента, один небольшой столбец с навигацией) и несколько «оберточных» div, которые существуют только для эстетических целей. HTML выглядит примерно так:Div в Div растягивать

<div id="out_wrapper"> 
    <div id="in_wrapper"> 
     <div id="nav"> ... content ... </div> 
     <div class="column"> ... content ... </div> 
     <div class="column"> ... content ... </div> 
    </div> 
</div>

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

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

На месте используется требование <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">, если это имеет значение.

источник

2011-02-01 KChaloux

вы установите прокладку на out_wrapper и in_wrapper? – bleepzter

Многие, многие похожие вопросы: [1] (http://stackoverflow.com/questions/1065408), [2] (http://stackoverflow.com/questions/992073/), [3] (http: // stackoverflow.com/questions/2627768/). Вы также должны взглянуть на 960.gz, Blueprint и Object-Oriented CSS framework, которые решают эту проблему. –

Установите высоту двух оберток на auto и добавьте прокладку на дно. Кроме того, overflow:hidden, если дети плавают.

#out_wrapper, #in_wrapper { height:auto;padding-bottom:10px;overflow:hidden;}

источник

2011-02-01 22:50:14 Stephen

Отлично. Работал как шарм! Принимая это, как только SE позволяет мне. – KChaloux

Вы пытались добавить очищенный div после всех столбцов? Как

<div style="clear:both"></div>

Это доставит контейнеры до общей высоты. Затем добавьте некоторый запас и/или дополнение, чтобы создать дополнительное пространство.

источник

2011-02-01 22:50:30

Хотя это * будет * работать, чтобы разрешить контейнер вокруг плавающего элемента, это ненужная разметка. Контейнер просто нуждается в «переполнении: скрытый», применяемом в CSS. – Stephen

Если родительский тег не растягивается, чтобы окружить дочерний тег, то ребенок, скорее всего, был выведен из нормального потока документа (посредством поплавка или позиционирования); вам нужно вернуть ребенка обратно в поток. Существует несколько способов сделать это:

Добавление стиля overflow:auto к элементу контейнера, в котором перемещаются элементы.

Добавление несемантических «ясное» DIV после перемещаемого содержания: <div style="clear:both"></div>

Making родители позиционируемый элемент, а также: position:relative;

источник

2011-02-01 22:54:12 Moses

+1: Не доводил меня до решения, но это помогло объяснить, почему у меня возникла проблема. Там действительно были поплавки. – KChaloux

Div в Div растягивать

ответ

Смежные вопросы