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容器只是左容器的大小（预期），但我不知道如何将其扩展到主体容器的大小。

更新

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/

将内容容器设置为100％的正文而不是父级

1 个答案: