2列布局，100％的高度，但不是100％的寬度

Question

我的問題是，我需要有兩列相同的高度，但不是100％的寬度。整個事情都以一個全屏幕BG圖像爲中心。

我發現很多針對100％寬度的着名2列問題的解決方案，但如果寬度是固定的，則無法解決。

我知道Matthew James Taylor Solution，但它僅適用於100％寬度佈局。

因此，這裏是我從平面設計師

    -------------------------------------------  
        |sub menu|   content    | 
        |  |        | 
        |  |        | 
        |  |        | 
        |  |        | 
        |  |        | 
        |  |        | 
        |  |        | 
        |  |        | 
        ---------|--------------------------------| 
          |   footer    | 
          |--------------------------------| 

所以子菜單中有一個固定的寬度和內容&頁腳中的最大寬度得到了佈局。

有時子菜單較高，有時候是內容區域。無論如何，他們必須是相同的高度（與背景）。

我得到的最接近（位置絕對使工作）：

#main-holder { 
position: relative; 
max-width: 944px; 
margin:0 auto; 
text-align:left; 
padding-top: 140px; 
z-index: 10; 
height: 100%; 
overflow: hidden; 
} 


#cont-holder{ 
position: absolute; 
display: block; 
float: left; 
max-width: 676px; 
min-height: 100%; 
margin-left: 134px; 
background-color: #ffffff; 
} 


#content{ 
position: relative; 
overflow: hidden; 
margin-right: 10px; 
} 

#sub-holder{ 
position: relative; 
background-color: none; 
float: left; 
width: 134px; 
margin-right: -134px; 
overflow: hidden; 
} 

#subs { 
background: #000000; 
padding:10px; 
overflow: hidden; 
clear: both; 
height: 100%; 
} 

，這裏的HTML

<div id="main-holder"> 
    <div id="sub-holder"> 
     <div id="subs"> 
      sub menu 
     </div> 
    </div> 
    <div id="cont-holder"> 
     <div id="content"> 
      content 
     </div> 
    </div> 
    <footer></footer> 
</div> 

完美的作品時，子菜單不再那麼內容。但是如果子菜單短於內容的話。

高興的任何幫助:-)

Answer 1

這可能是一個很好的參考，爲您檢查。

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Answer 2

你想要一些類似表格佈局：

.container { 
    display: table; 
    margin: 10px auto; 
} 
.row { 
    display: table-row; 
} 
.row > div { 
    display: table-cell; 
} 

<div class="container"> 
    <div class="row"> 
     <div id="subs">subs</div> 
     <div id="main">main</div> 
    </div> 
    <div class="row"> 
     <div id="spacer"></div> 
     <div id="footer">footer</div> 
    </div> 
</div> 

看到一個演示：http://jsfiddle.net/AWJph/