2 列布局，100% 高度但不是 100% 宽度答案

【问题标题】：2 column layout with 100% height but not 100% width2 列布局，100% 高度但不是 100% 宽度
【发布时间】：2012-12-24 16:12:36
【问题描述】：

我的问题是我需要两列高度相同但不是 100% 宽度。整个东西居中，有一个全屏 BG-Image。

我为著名的 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>

当子菜单比内容长时效果很好。但是如果子菜单比它从内容中截断的要短。

很高兴得到任何帮助 :-)

【问题讨论】：

所以我自己来回答我的问题....我找不到适合的 css 解决方案....时间在流逝.... jQuery 必须帮助我：@987654322 @ 完美！

标签： css multiple-columns

【解决方案1】：

你想要一些类似表格的布局：

.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/

【讨论】：

【解决方案2】：

这可能是您查看的一个很好的参考。

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

【讨论】：