将内容容器设置为 100% 的主体而非父级答案

【问题标题】：Set content container to 100% of body not parent将内容容器设置为 100% 的主体而非父级
【发布时间】：2013-04-06 11:31:17
【问题描述】：

我正在尝试创建一个 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 容器只有左容器的大小（这是预期的），但我不知道如何将其扩展为主体容器的大小。

更新

http://jsfiddle.net/Ex4tK/

【问题讨论】：

我编辑了您的问题，以使您更清楚您要做什么。请检查您编辑的帖子以确保其准确无误。谢谢。
@MarcAudet 你不应该打扰，我认为没有人会回答

标签： html css responsive-design liquid-layout

【解决方案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/

【讨论】：

这不是我想要的，如果添加更多内容，权利会自行扩展。
我没有添加其中一些类，但我会删除它们并发布一个 jfiddle 链接
感谢您的提琴。我的意见仍然相同（尤其是对于流畅的布局）。您可以通过将 overflow 设置为可见来欺骗父宽度；但是，当您随后将 100% 添加为孩子的宽度时，您将其设置为“成为父母的宽度”而不是祖父母的宽度。
更新了你的小提琴。删除了浮动，并添加了定位，以及溢出：对 'left' 可见，这将允许宽度欺骗父级。 jsfiddle.net/Ex4tK/1
请记住，如果您使用overflow:visible 允许'main' 作弊，'left' 的所有其他子项也可以作弊宽度。所以你需要给他们一个 182px 的最大宽度来匹配他们的父母。