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

Question

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

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

</div> 

Теперь, когда содержание в Div-больше, то он расширяет основной контейнер, но по div2, который является справа не расширяется

есть ли способ, так что div2 также расширяется с див1 без изменения HTML

Answer 1

способ сделать это с 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; 
} 

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

Это стоит выстрел:

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

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