1

私の問題は、同じ高さの2つの列が必要ですが、幅が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>

サブメニューがコンテンツよりも長い場合に最適に機能します。ただし、サブメニューがコンテンツから切り離されるよりも短い場合。

助けてくれてうれしい:-)

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 に答える