在複雜的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