Question

我的问题是我需要两个相同高度但不是100％宽度的列。整个事情都集中在一个全屏BG-Image。

我找到了很多针对100％宽度的着名2列问题的解决方案，但是如果宽度是固定的，则没有。

我知道Matthew James Taylor Solution但它仅适用于100％宽度布局。

所以这是我从平面设计师那里得到的布局

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

因此子菜单具有固定的宽度和内容＆amp;页脚最大宽度。

有时子菜单较高，有时是内容区域。无论如何，他们必须是相同的高度（与背景）。

我得到的最接近的位置（绝对位置使得工作）：

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

Answer 2

这可能是您退房的好参考。

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

2列布局，高度为100％但不是100％宽度

2 个答案: