1

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

我为著名的 100% 宽度的 2 列问题找到了很多解决方案，但如果宽度是固定的，则不是。

我知道Matthew James Taylor 解决方案，但它仅适用于 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>

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

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

4

2 回答 2

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/

于 2012-12-24T08:12:36.497 回答
0

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

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

于 2012-12-24T07:41:02.367 回答