Layout 在复杂CSS布局中将高度设置为最大。在维基上

我正在构建一个布局，需要确保一些div高度随着div中内容的增长而扩展，以填补空白。它必须在内联样式=。。。divs上的CSS，因为它嵌入在wiki页面中，我不能添加样式表、javascript等

在下面的布局中，左上左和左上右需要相等地跨到左下的顶部。侧边栏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>

---

尝试添加样式=最小高度：200px

我肯定会使用display:table/表格行/表格单元格：

---

编辑：注意，底部元素应仅跨到列。不幸的是，CSS中没有rowspan和colspan，所以您需要用其他方法来解决它。

使用JavaScript更容易解决这个问题。只需创建一个具有不同颜色的背景图像，并将此背景图像设置为包装div，然后将其设置为repeat-y