Поле Div не расширяется при переполнении

Question

У меня есть следующий HTML (не правильный код, но для понимания)

<div id=content-wrap overflow-hidden>
<div1 float-left overflow hidden> </div>
<div2 float-right overflow hidden> </div>

</div>

Теперь, когда содержимое в div 1 больше, оно расширяет основной контейнер, но на div2, которое справа, не расширяется

Есть ли способ, чтобы div2 также расширялся с помощью div1 без изменения HTML

Answer 1

Вам понадобится JavaScript, чтобы сделать эту работу.Вы не сможете исправить это с помощью CSS.Что вы можете сделать, это дать обеим колонкам высоту 100%, но я не думаю, что вы этого хотите.

Answer 2

Это стоит попробовать:

#content-wrap { position: relative; }
#div2 { position: absolute; top: 0; bottom: 0; }

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

Answer 3

Способ сделать это с помощью CSS 2.1 - использовать таблицу отображения:

#content-wrap {
    display: table-row;
}
#content-wrap div {
    display: table-cell;
}

Причина, по которой большинство людей не использует его, заключается в том, что он не работает в IE6 и 7, также вам понадобится дополнительный элемент-обертка для объявления display: table, чтобы все работало правильно.

Альтернативный подход с CSS3 заключается в использовании flexboxes :

#content-wrap {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}
#content-wrap div {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

- Edit

Теперь, когда я стал старше и мудрее, вам действительно нужно это только для подхода display: table:

#content-wrap {
    display: table;
}
#content-wrap div {
    display: table-cell;
}

Это должно работать с вашей текущей разметкой, механизм размещения вставит анонимный табличный объект , чтобы взять на себя роль table-row.

Также обратите внимание, что черновой вариант flex box значительно изменился за последнее время, но браузеры все еще используют старый черновик.

Answer 4

Я думаю, что это невозможно с divs. Таблицы решают проблему. Когда div1 расширяется, невозможно также расширить div2! использование некоторого JavaScript решит проблему

Answer 5

Если вы хотите добавить немного CSS3 (не поддерживается во всех браузерах), вы можете сделать что-то, найденное здесь: http://www.css3.info/preview/multi-column-layout/