layout - 在复杂的 CSS 布局中将高度设置为最大值。在维基中

Question

我正在构建一个布局，需要确保一些 div 高度随着 div 中内容的增长而扩展以填补空白。它必须在 div 上使用内联 style="..."CSS 可行，因为它嵌入在维基页面中，我无法添加样式表、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

尝试添加 style="min-height:200px;"