css - 高度为 100% 但宽度不是 100% 的 2 列布局

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

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

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