將內容容器設置爲非父母身體的100％

我正在嘗試創建2列液體佈局，其左側的菜單和右側的網站內容。將內容容器設置爲非父母身體的100％

該菜單打算進入右欄（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/

來源

2013-04-06 mk_89

我編輯你的問題，以使其更清晰你正在嘗試做的。請檢查您編輯的帖子，確保它是準確的。謝謝。 – 2013-04-06 12:00:53

@MarcAudet你不應該打擾，我不認爲有人會回答 – 2013-04-06 12:05:37

你的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/

來源

2013-04-06 12:09:40 Dawson

這不是我想要的，如果增加更多內容，權利將自行擴大。 – 2013-04-06 12:14:00

我沒有添加一些這些類，但我會刪除它們併發布jfiddle鏈接 – 2013-04-06 12:22:05

http://jsfiddle.net/Ex4tK/ – 2013-04-06 12:25:54

將內容容器設置爲非父母身體的100％

回答

相關問題