在复杂的CSS布局中将高度设置为最大值。在wiki

我正在构建一个布局，并需要确保一些div高度扩大，以填补divs内容增长时的空白。它必须可以通过inline style =“...”div来实现，因为它嵌入在wiki页面中，而且我无法添加样式表，javascript等。在复杂的CSS布局中将高度设置为最大值。在wiki

在以下布局中，LEFT-TOP -LEFT和LEFT-TOP-RIGHT需要同样跨度到左下角的顶部。补充工具栏1和补充工具栏2需要跨越到页脚。

enter image description here

我使用的基本的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>

来源

2011-10-07 bill weaver

用JavaScript解决这个问题更容易。 –

只是用不同的颜色创建背景图像，并将此背景图像设置为包装div，并将其设置为repeat-y – Gerben