将内容容器设置为非父母身体的100％

Question

我正在尝试创建2列液体布局，其左侧的菜单和右侧的网站内容。

该菜单打算进入右栏（div.liquid-right），然后站点内容将进入左栏（div.liquid-left）。

我需要内容容器与主体（即div.liquid-right）的大小相同，而不是其父容器（div.liquid-left）的父容器。

布局可以用下图来表示：

_______________ 
| ____  R | 
| |L __|_____ | 
| | |C |  || 
| | | |  || 
| | | |  ||  
|_|_|__|_____|| 

HTML标记

<div class="liquid"> 
    <div class="liquid-right"> 
     <div class="liquid-left"> 
      <div class="content"> 
       <div>main content</div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS样式

.liquid{ 
    width:100%; height:100%; float:left; 
} 

.liquid .liquid-right{ 
    width:100%; float:left; background-color:#FFF; margin-top:45px; 
} 

.liquid .liquid-left{ 
    width:182px; float:left; min-height:200px; 
    background-color:#FF7575; position:relative; 
} 

.liquid .content{ 
    background-color:#00F; float:left; height:100px; width:100%; 
} 

目前.content容器只是左侧容器的大小（这是预期的），但我不知道如何将其扩展到容器的大小。

UPDATE

http://jsfiddle.net/Ex4tK/

Answer 1

你的left内的两个内容块。如果您希望它们展开并保持left不变，请将这些孩子移出。

<div class="liquid-right"> 
    <div class="liquid-left">Left</div> 
    <div class="liquid-content">Liquid Content 
     <div> 
     main content 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/MhCke/