Layout 2 переменной высоты столбцов

Question

Я пытаюсь создать следующую структуру 2-колонки в моей веб-странице:

+-------+---+ 
|  | | 
|  | | 
| A | B | 
|  | | 
|  | | 
|  | | 
|  +---+ 
|  | | 
|  | C | 
|  | | 
+-------+---+ 

Со следующими характеристиками:

1. Оба левые и правые столбцы имеют фиксированную ширину.
2. Содержание C фиксировано, поэтому C имеет фиксированную высоту.
3. Количество контента в A и B может варьироваться (конечный пользователь предоставляет это), и поэтому минимальная высота для A и B может меняться.
4. Если для A требуется более высокая высота, чем B и C, то высота B должна быть растянута так, чтобы она продолжала касаться C, а нижняя часть C совпала с нижней стороной A.
5. Если A требует меньше высоты, чем B и C, то A должен быть растянут так, чтобы нижняя часть A и C выровнялась.
6. A и B имеют четкую границу и/или цвет фона, поэтому я не могу обманывать, не растягивая один из них (и C не требует растяжения).

Я попытался сделать это, представив каждую ячейку с помощью div и используя событие готовности документа jQuery, чтобы настроить ячейки на соответствующие высоты, в зависимости от того, какой столбец является самым высоким.
В большинстве случаев это работает. Однако, поскольку A содержит встроенное видео YouTube, а C содержит встроенный раздел Google Maps, происходит много динамического изменения контента, и это иногда заставляет мой код javascript работать с неправильными значениями высоты и испортить процесс компоновки ,
Кроме того, он выглядит довольно уродливым, когда вы видите, что контентные ячейки растягиваются до их правильной высоты, хотя я мог бы жить с этим, если бы он работал последовательно.

В качестве альтернативы я попытался использовать таблицу для этого макета, поскольку они имеют встроенное поведение «держать все столбцы одинаково высоки».
Проблема с этим подходом заключается в том, что я должен использовать «td rowspan = 2» для A, и как только я это сделаю, IE и Chrome игнорируют любую фиксированную высоту, которую я указываю на C, но вместо этого делают C слишком высокой.

Так что в основном я полностью зациклен на том, как реализовать этот (казалось бы, простой) макет. Может кто-то указать мне верное направление?

Я нацелен на Chrome, FireFox и IE7 +, но в IE7 и IE8 приемлема приемлемая аппроксимация желаемого макета.

Answer 1

Хорошо, я на работе, поэтому я это лучшее, что я мог бы сделать сейчас, но он отлично работает на IE7.

Некоторые слова перед рукой. Для этого решения я использовал таблицы.Теперь нет ничего плохого в использовании таблиц - когда вы используете его для табличных данных или в редких случаях, подобных этому. В этом случае его необходимо использовать для решения этой проблемы с помощью базового css. Единственный другой способ - использовать технологии (продвинутый CSS), которые могут оттолкнуть некоторых пользователей - в конечном счете, вам решать, использовать ли вы что-то, что может не работать в браузере каждого пользователя. Я уверен, что не смог бы правильно просматривать ваш сайт, если бы вы использовали CSS3 +, потому что я застрял на IE7 прямо сейчас.

Я тестировал это на IE7 и работал как шарм. Как вы видите, это не очень тяжелый код.

HTML

<div id="cols"> 
<table> 
    <tbody> 
     <tr> 
      <td class="left"">A Box</td> 
      <td class="right"> 
       <div>B Box</div> 
       <div>C Box</div> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</div> 

CSS:

#cols table td { 
    width: 250px; 
} 
#cols table td.left { 
    background: #f1f1f1; 
} 
#cols table td.right { 
    padding: 0 0 250px 0; 
    background: #ccc; 
    position: relative; 
} 
#cols table td.right div + div { 
    position: absolute; 
    bottom: 0; 
    width: 250px; 
    height: 250px; 
    background: #000; 
    color: #fff; 
} 

Результаты:

Как вы видите, этот код работает для 2-х случаях: левая колонка больше; или, правый столбец больше.

Answer 2

Попробуйте этот смешанный div как таблицу. Я на Mac, но я не могу проверить его на IE, но я думаю, что это будет работает на IE хорошо

HTML:

<div id="table"> 
    <div id="table-cell-left"> 
     <div id="aid" class="row">A ID</div> 
    </div> 
    <div id="table-cell-right"> 
     <div id="bid" class="row">B ID content <br />B ID content <br />B ID content <br />B ID content <br />B ID content <br />B ID content <br /></div> 
     <div id="cid" class="row">C ID</div> 
    </div> 
</div>  

CSS:

#table{display:table;} 

#table-cell-right, 
#table-cell-left{display:table-cell;} 

#table-cell-left{background:blue;} 

#aid,#bid,#cid{width:150px} 

#aid{height:100%;border:1px solid #ccc;} 
#bid{height:auto;border:1px solid #000;background:red;} 
#cid{height:20px;float:right;background:yellow} 

Посмотреть демо на здесь: http://jsfiddle.net/WpuPq/5/