Установите максимальную высоту в сложном макете CSS.В вики

Question

Я строю макет и мне нужно, чтобы некоторые высоты div увеличивались, чтобы заполнить пробелы по мере роста содержимого в div.Это должно быть выполнимо с CSS inline style = "..." в div, так как он встроен в вики-страницу, и я не могу добавить таблицы стилей, javascript и т. Д.

В следующем макете LEFT-TOP-LEFT и LEFT-TOP-RIGHT должны простираться в равной степени на вершину LEFT-BOTTOM.Боковая панель 1 и боковая панель 2 должны располагаться внизу.

Базовая HTML-структура, которую я использую, выглядит следующим образом.Ширина упрощена;в действительности две боковые панели больше похожи на 15% и 15%.Если бы было проще с другой структурой, я тоже открыт для этого.

<div style="font-size:10px;width:40em;margin:0;padding:0;background-color:#eee;color:#333;line-height:1.2em;">
  <div style="background-color:#ddd;border:1px solid #aaa;">header</div>

  <div style="float:left;width:20em;">
    <div style="float:left;width:20em;">
      <div style="float:left;width:10em;background-color:#aff;">
        <p>LEFT-TOP-LEFT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
        auctor faucibus diam vitae rutrum. Cras feugiat, orci in pulvinar mattis, sem
        eros laoreet ligula, auctor sollicitudin nibh massa vitae ipsum. In non interdum ante.</p>
        </div>
      <div style="float:left;width:10em;background-color:#ccf;">
        <p>LEFT-TOP-RIGHT Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
        nonummy nibh euismod tincidunt ut.</p>
      </div>
    </div>
    <div style="clear:both;width:20em;background-color:#aaf;"><p>LEFT-BOTTOM Lorem ipsum
        dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
    </div>
  </div>

  <div style="float:right;width:20em;">
    <div style="float:right;width:20em;">
      <div style="float:left;width:10em;background-color:#77a;">
        '''Sidebar 1'''<p>RIGHT-1</p></div>
      <div style="float:left;width:10em;background-color:#a77;">
        '''Sidebar 2'''<p>RIGHT-2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Sed auctor faucibus diam vitae rutrum. </p></div>
    </div>
  </div>
  <div style="clear:both;color:#333;background-color:#ddd;"> Footer </div>
</div>

Answer 1

Я бы определенно использовал display: table / table-row / table-cell:

http://jsfiddle.net/GW848/

Редактировать: заметил, что нижний элемент должен охватывать только столбцы. К сожалению, rowspan и colspan недоступны в CSS, поэтому вам нужно решить их другим способом.

Answer 2

Попробуйте добавить style="min-height:200px;"